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模塊支持

回答

相關問題