在 React 中导入 CSS 文件 - Webpack / 内联样式

Question

我被分配了一个项目，我需要对使用 React + Wepback 构建的应用程序进行风格化。

当我查看检查器元素中的输出时，我可以看到大多数元素都有一个动态创建的类，如下所示：css-18s71b6

查看样式，它是从节点模块导入的样式表...确切地说是 Microsoft Frabric。

我可以添加我的自定义样式表，以便我可以将我的 className 添加到元素中，但我遇到的问题是我的样式从未被考虑，因为 React 的动态 css 规则始终具有优先权。

解决这个问题的唯一方法是将!important 放入我所有没有意义的 CSS 规则中。

我的猜测是我需要告诉 React + Webpack 在编译动态内联 css 样式或禁用动态类时使用我的样式表。

我对 React + Webpack 完全陌生。我已经为此工作了几个小时，阅读和测试，但从未找到任何解决方案。任何意见表示赞赏。

不管怎样，我的 webpack.bable.js 文件看起来像这样

module: {
    loaders: [{
      test: /\.js$/, // Transform all .js files required somewhere with Babel
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: options.babelQuery,
    }, {
      test: /\.css$/,
      include: /node_modules/,
      loaders: ['style-loader', 'css-loader'],
    }, 
    [... more stuff ...]
}

Answer 1

经过无数个小时，我终于找到了答案，并发布它以防其他人有同样的问题。

问题是在配置文件中，当您include: /node_modules/ 时，它不会包含您的自定义 CSS 样式。你需要一个单独的加载器来完成这个。

我最终的 webpack 配置如下所示

    [...] {
      // Preprocess our own .css files
      test: /\.css$/,
      exclude: /node_modules/,
      use: ['style-loader', 'css-loader'],
    },{
      test: /\.css$/,
      include: /node_modules/,
      loaders: ['style-loader', 'css-loader'],
    } [...]

请注意，第一个规则排除 node_modules，第二个规则包含 /node_modules/

有关该主题的更多信息，请访问this forum post on Github。