Question

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

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

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

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

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

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

我是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。

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

1 个答案: