Webpack + Reactでcss-loaderインラインを使用する

Question

Webpackとcss-loader w/modulesでReactアプリケーションを構築しています。大好きです。私のスタイルシートのほとんどは非常に小さいので、マークアップやJavaScriptと同じJSXファイル内にインライン展開したいと思います。

は、私が今使っているCSSローダは次のようになります。

{ test: /\.(css)$/i, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") } 

を私のJSXでは、私はこのように私の個別のCSSファイルをimport：これは、その後コンパイルし、翻訳され

import classNames from 'dashboard.css'; 
... 
<div className={classNames.foo}></div>; 

<div class="xs323dsw4sdsw_"></div> 

しかし、私がしたいのは以下のようなものです。まだローカライズされたモジュールを維持しながらcss-loaderは私を与えること：

var classNames = cssLoader` 
    .foo { color: blue; } 
    .bar { color: red; } 
`; 

... 
<div className={classNames.foo}></div>; 

これは可能ですか？実際にrequire/import別のファイルを使わなくても、どうすればいいですか？

Answer 1

あなたの問題は、あなたの現在のウェブパック設定がCSSモジュールを使用していることです。 CSSモジュールはCSSクラスの名前を自動的に変更し、グローバルクラス名の衝突を防ぎます。

修正：

// remove 'modules' from the end of your css-loader argument 

{ test: /\.(css)$/i, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") } 

// like so 

{ test: /\.(css)$/i, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader") } 

今すぐあなたのクラス名が保存されます。しかし、なぜあなたはこれをやりたいのか分かりません。理由を分かち合いたいですか？