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你想保持全球性，你需要为他们添加另一个规则

// 编辑

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

{
  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，所以我将其排除在外 - 如果您使用它，则以相同的方式添加它

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

react-toolbox css config in webpack 2 not working

reactjs

webpack

postcss

webpack-2

react-toolbox