Question

所以我试图将这两个模块集成到我的项目中，并且我在处理它的CSS部分时遇到了困难。

我的项目是使用postcss将我自己的css文件转换为“已编译”的css文件，并为每个文件添加了类名。 react-virtualized和react-select都有自己的css文件来定义样式，但是我不明白我如何覆盖它们或将它们集成到我的项目中。

我的webpack css配置如下：

[
{ loader: 'style-loader' },
{
  loader: 'css-loader',
  options: {
    localIndentName,
    sourceMap: true,
    modules: true,
    importLoaders: 1
  }
},
{
  loader: 'postcss-loader',
  options: {
    plugins: [
      postcssImport({ path: path.resolve(PATHS.app, './css') }),
      postcssCssnext({ browsers: ['> 1%', 'last 2 versions'] }),
      postcssReporter({ clearMessages: true })
    ]
  }
}]

{
  test: /\.css$/,
  use: loaders
}

当我在我的主app.js文件中执行以下行时，我得到了一个失败的css解析错误（意外令牌）。

import 'react-virtualized/styles.css';

我能够加载CSS样式的唯一方法是使用

import '!style-loader!css-loader!./css/unstyled/react-virtualized.css';

意思是，将整个CSS复制到我自己的项目中并导入它而不使用postcss。但是，我不知道这是否是最好的方法，因为它非常明确地使用这些模块。

有没有人有更好的解决方案？

Answer 1

您有两个选择：

告诉反应虚拟化了CSS正在使用的类名称。
告诉您的CSS加载程序不要转换反应虚拟化的特定默认类名。

对于选项1，请查看react-virtualized docs。例如，查看List component。它接受className属性，该属性指定要附加到外部元素的外部CSS类名。由于您渲染自己的List行，因此您还可以将自定义类名附加到这些元素。

对于选项2，使用react-virtualized的默认类名（也列在项目文档中）并告诉您的CSS加载器不要通过将它们包装在:global(...)语句中来破坏它们（如{{3中所示） }}）。

使用css类名和react-virtualizationized或react-select

1 个答案: