Webpack 2 CSS 模块支持答案

【问题标题】：Webpack 2 CSS Modules supportWebpack 2 CSS 模块支持
【发布时间】：2017-04-22 15:23:59
【问题描述】：

现在我正在将我当前的项目从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，只导出标识符映射。

所以我尝试了 loader: 'css-loader/locals' 并将其添加到选项中，但不幸的是，没有任何效果。

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

【问题讨论】：

标签： postcss webpack-2 css-modules css-loader react-css-modules

【解决方案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'
       ]
    }),

适合我

【讨论】：