reactjs - webpack 2中的react-toolbox css配置不起作用

Question

我正在使用 webpack，并且一直在尝试配置 react-toolbox 库。我设法让它工作，但 CSS 没有加载。

webpack.config.js

Answer 1

您尚未将样式加载器配置为发出 CSS 模块

将此添加到您的样式加载器

loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss'

这将打开 CSS 模块，并将其设置为允许 postCSS 连接到它

请记住，这现在会将任何.scss或.css文件视为本地范围的模块，因此如果您有任何单独的普通 SCSS 或想要保持全局的 CSS，您将需要为它们添加另一个规则

// 编辑

如果您的其他加载程序配置仍在该数组中，则使用加载程序字符串可能会混淆（因为上面的字符串是组合它们的简写），请尝试单独使用配置对象...

{
  test: /\.css$/,
  use: [
    'style-loader', 
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        localIdentName: '[name]__[local]___[hash:base64:5]',
        modules: true
      }
    }, 
    {
      loader: 'postcss-loader',
      options: {
        plugins: [
          postcssNext
        ]
      }
    }
  ]
}

React Toolbox 不再使用已迁移到 PostCSS 的 SCSS，因此我将其省略了 - 如果您使用它，则以相同的方式添加它