WebpackとReactを使用して開発/生産におけるCSSモジュールを設定する

Question

本番環境でCSSモジュールを使用し、標準のCSSファイルを運用環境で使用するにはどうすればよいですか？

import style from './stile.scss'; 
export class App extends React.Component { 
render() { 
    return (
     <div> 
      <div> 
       <span className={style.title}>Ciao</span> 
      </div> 
     </div> 
    ) 
} 
} 

：私は、スタイルファイルをインポートし、私の.jsxのファイルに

：

私はWebPACKのローダーを使用してCSSモジュールを使用開発でのWebPACK

を使用して反応して新しいアプリケーションを構成しています

私は自分のスタイルシートのローダーに以下のウェブパック設定を使用します：

loaders: [ 
{ 
    test: /\.(scss|css)$/, 
    loader: 'style-loader!css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap' 
    } 
] 

このすべてが動作する方法（スタイルが正しくがhased .jsファイルおよびクラスに含まれています）

しかし生産で？ブラウザからwebpack bundle.js出力ファイルに含まれるすべてのクラスをレンダリングする必要がありますか？

私はむしろ、すべての私のスタイルでのWebPACK（およびExtracttextPlugin）とCSSファイルを作成します

：

{ 
    test: /\.(css|scss)$/, 
    loader: ExtractTextPlugin.extract('css-loader') 
} 

と私のindex.htmlで生産の.cssをリンク

問題は今、すべての私ですにあるクラス定義は反応しませんはブラウザに表示されなくなりました。

どうすれば解決できますか？

Answer 1

CSSモジュールの使用から使用しないように切り替えるだけでは、コードに依存しないため、CSSモジュールを使用しないように切り替えることはできません。また、本番環境でCSSモジュールを使用しない理由もありません。あなたが変えたいのは、CSSモジュールではなく、CSSを組み込む方法です。あなたのJavaScriptバンドルではなく、別の.cssファイルにextract-text-webpack-pluginでそれらを抽出することができますが、ローダーには同じ設定を使用する必要があります。

WebPACKの1

{ 
    test: /\.(css|scss)$/, 
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap') 
} 

CSSが抽出できない場合は最初の引数style-loaderのみフォールバックとして使用されます。

WebPACKの2

ExtractTextPlugin.extractの引数ではなく、文字列のインラインクエリのoptionsを使用して変更し、読みやすくするため。

{ 
    test: /\.(css|scss)$/, 
    loader: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: [ 
     { 
     loader: 'css-loader', 
     options: { 
      sourceMap: true, 
      modules: true, 
      importLoaders: 1, 
      localIdentName: '[name]-[local]___[hash:base64:5]' 
     } 
     }, 
     { loader: 'sass-loader', options: { sourceMap: true } } 
    ] 
    }) 
}