4

現在、現在のプロジェクトをWebpack 1からWebpack 2に移動しています。以前はうまく動作していたCSSモジュールでいくつか問題が発生しました。特に、私はcss-loaderreact-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' 
    ] 

これは問題なく動作します。ビルドには、次のエラーで失敗します。この場合、

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 

生産のために私はExtractTextPluginを使う(バージョン2.0.0-beta.4)およびその場合のための私のWebPACKの設定はこのように書きますだから、ローカルプレフィックスの前にはないようです。また、css-loaderドキュメントに記載されている:「CSS-ローダ/地元の人々」などのオプションに追加し、しかし、残念ながら、何も機能しません:

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.

は、だから私は、ローダーを試してみました。

また、この問題をpostcss postcss-modulesプラグインで解決しようとしました。それはビルドを修正しますが、アプリケーションを起動しようとするとCSSの名前マッピングが適切にインポートされていないように見えます。

答えて

5

その場合、誰かが将来同じ問題に直面するでしょう。このバージョンの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' 
     ] 
    }), 
関連する問題