Webpack 2 中的 React-toolbox CSS config 不起作用

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 不再使用 SCSS 迁移到 PostCSS，所以我省略了它 - 如果您使用它，请以相同的方式添加它