現在、現在のプロジェクトを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'
]
これは問題なく動作します。ビルドには、次のエラーで失敗します。この場合、
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の名前マッピングが適切にインポートされていないように見えます。