問題タブ [css-modules]

react-css-modules、webpack、およびHot Module Replacementを使用して React プロジェクトをセットアップしようとしています。すべてが魅力的に機能していますが、CSS ソースマップを機能させることができません。

このガイドに従って、HMR を機能させました。これには、Webpack が css ファイルをディスクに書き込んだ後に css ファイルを更新するための BrowserSync セットアップが含まれます。

私は（react-css-modulesで提案されているように）ExtractTextPluginすべてのcssを抽出するために使用します：

しかし、ここで提案されているように、これをソースマップに変更すると

"root" CSS module is undefined.ブラウザのコンソールに次のエラーが表示されます。

サンプル リポジトリはこちらにありますが、開発に使用している完全な webpack 構成は次のとおりです。

ソースマップを機能させるには?

nav複数の<li>and<a>タグがネストされた React モジュールが呼び出されたとします。CSS モジュールを使用して、次のような「継承可能」または「カスケード」ルールを設定するにはどうすればよいですか。

1 つの要素に 1 つのスタイルしか直接適用できないようです。

postcss-bem を使用して bem スタイルで css ファイルを生成する方法を学んでいますが、CSS-Modules や Postcss-JS のようなパッケージがあり、以下のようなことを行うために使用できるのではないかと思います:

CSS-Modules と Postcss-JS のドキュメントでこの機能を見つけましたが、postcss-JS で webpack の postcss-loader を使用して postcss-bem.css を解析しようとすると、

ローダー: ["style-loader","css-loader","postcss-loader?parser=postcss-js"]

しかし、私はこのようなエラーを得ました

モジュールのビルドに失敗しました: SyntaxError: Unexpected token ILLEGAL

私はそれを間違っていますか？

反応アプリをスタイリングしています。私はwebpackでcss-modulesを使用しています。これが私の設定です：

コンポーネントのスタイルを設定し、コーヒーを作りましたが、動作しません。だから私は使用したいスタイルシートを持っています。私はそれをインポートしています：

しかし、コンポーネントの内部を壊すと、styles定義されていません。私のスタイルはどれも現在適用されていません。これが私がそれをどのように使用しているかの例です:

なぜstyles空になるのですか？

に組み込まれている CSS モジュールのサポートは非​​常にwebpackシンプルに見えます: requireCSSimportファイルと webpack は、次の 2 つのことを行うコードを生成するだけです。

• 生成された CSS を Web ページに挿入します
• 使用するクラス名の辞書を返します。

また、使用方法も非常に簡単です。

別の CSS モジュールの実装であるプラグインをテストしたいと思います。PostCSSこれは、他のPostCSSプラグイン、特にautoprefixer. しかし、公式ドキュメントによると、 CSS モジュールとはpostcss-modules動作が大きく異なるようです。webpackドキュメントには使用例がなく、生成するいくつかのコールバック コードのみがありますJSON。上記のサンプルコードと同じ目標を達成するために実際に使用されている例はありますか?

css ファイルのセット (react コンポーネントごとに 1 つ) を持つプロジェクトがあります。私は、webpack と postcss-cssnext で css-loader (モジュールをオン) を使用しています。

variables.css理想的には、css ファイル間で変数を共有できるように単一が必要です。私はvariables.css次のようなものを含めてみました:

それをインポートして、cssローダーを通過します。問題は、他のファイルがこれらの変数を取得しないため、これが機能しないか、何か間違っていることです (これをコンポーネント css ファイルに直接含めると機能します)。

機能することの 1 つはstyles.json、次の webpack セットアップを含むファイルを用意することです。

ただし、これに関する主な問題は、変数を変更するたびに、webpack dev サーバーを再起動する必要があることです (したがって、webpack 構成をリロードします)。これは理想的ではありません。

それで、これを行うためのより良い方法について何か考えはありますか？

私は新しいReactプロジェクトで (Webpack css loader を介して) CSS モジュールを使用しています。これは、JSが認識していないlocalclassNamesを作成しようとするためだと思います。react-selectファイル全体をインポートする方法はあり.scssますが、ローカルではなくグローバルにスコープされていますか?