Webpack 2 CSS模块支持

Question

现在我正在将我当前的项目移动Webpack 1到,Webpack 2并且我遇到了一些以前工作正常的css模块的问题.特别是,我使用css-loader和react-css-modules.我目前的开发配置如下:

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

它工作正常.对于生产我使用ExtractTextPlugin(版本2.0.0-beta.4)和我的Webpack配置为这种情况是这样的:

test: /module\.css$/,
loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
                    {
                       loader: 'css-loader',
                       options: {
                           modules: true,
                           importLoaders: 1,
                           localIdentName: '[hash:base64:5]'
                       }
                     },
                     'postcss-loader'
                    ]
                }),

在这种情况下,构建失败并出现以下错误:

 Module build failed: Error: composition is only allowed
 when selector is single :local class name

所以看起来它没有预先添加本地前缀.它也在css-loader文档中提到:

注意:对于使用extract-text-webpack-plugin进行预渲染,您应该在预渲染包中使用css-loader/locals而不是style-loader!css-loader.它不嵌入CSS,只导出标识符映射.

所以我尝试了加载器:'css-loader/locals'以及将它添加到选项中,但不幸的是,没有任何作用.

我也试图用postcss postcss-modules插件解决这个问题.它修复了构建,但是当我尝试启动我的应用程序时,看起来它没有适当的css名称映射导入.

Answer 1

如果有人将来会遇到同样的问题.对于此版本的ExtractTextPlugin(2.0.0-beta.4),您应该以Webpack-1方式设置加载器参数.具体来说:

 loader: ExtractTextPlugin.extract({
       fallbackLoader: 'style-loader',
       loader: [
           'css-loader?modules&importLoaders=1&localIdentName=[hash:base64:5]',
           'postcss-loader'
       ]
    }),

对我来说很好