Webpack 2 CSS模块支持

现在我正在将我目前的项目从Webpack 1移动到Webpack 2，我遇到了一些以前工作正常的css模块的问题。特别是，我使用css-loader和react-css-modules。我目前的开发配置如下：Webpack 2 CSS模块支持

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文档中提到：

Note: For prerendering with extract-text-webpack-plugin you should use css-loader/locals instead of style-loader!css-loader in the prerendering bundle. It doesn't embed CSS but only exports the identifier mappings.

所以，我想装载机：“CSS-装载机/当地人以及将其添加到选择，但不幸的是，没有任何工程。

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

来源

2016-12-07 Voice

万一，有人会在未来面临同样的问题。对于此版本的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' 
     ] 
    }),

工作正常，我

来源

2016-12-08 08:57:19 Voice

Webpack 2 CSS模块支持

回答

相关问题