問題タブ [css-modules]

webpack レベルでのcss-modulesグローバル vs ローカル css の問題を解決しようとしています。

私が現在持っている最善の解決策は、ファイルにラベルを付けて、それらに対してさまざまなローダーを実行することです。これは、実際のプロジェクトで使用するのは面倒です。

ファイル styles.css があるとしましょう

アプリコードのどこかにこれを書きたい:

これは冗長ですが、

1. 明示的で、後で構成できます (localByDefault/globalByDefault)
2. gitの観点から常にファイルの名前を変更するよりも優れています
3. 同じファイルを別の方法で処理できます

だから私の質問は：

異なるクエリ パラメータに応じて、条件付きで異なるローダーを適用することは可能ですか?

反応、反応ルーター、エクスプレス、webpack を使用して同形アプリを構築しています。css モジュールを使用して css をインポートしたいと考えています。

クライアントでは問題なく動作しますimport './index.css'がindex.jsx、サーバー レンダリングでは動作しません。エラーはError: Cannot find module './index.css'です。

コンポーネント/index.jsx

サーバー/ルーター/index.js

webpack.config.dev.js (webpack-dev-server 用)

この答えがどこにも見つからないようです！基本的にCSSモジュールを使用しており、ファイルをインポートしています。CSS ファイルの例を次に示します。

そして、これまでの JS ファイルの内容は次のとおりです。

に 2 つのクラスを追加する方法がわかりclassNameません。以下は機能しません。

助けてください、どうすれば2つのクラスを1つの要素に配置できますか?

私はreact-routerとCSS-modulesとwebpackでreactを使用しています。これはすべてうまく機能していましたが、言語を変更できるようにするための要件が​​発生しました。最初に状態属性を別の言語に変更するだけでこれを実行しようとしましたが、それを変更すると現在のルートは再レンダリングされないため、言語の変更は次のルート変更が発生したとき、つまりリンクをクリックしたときにのみ有効になります。

プラン B: ロケールをルーティングに追加しようとしている / そのため、URL に表示されるようになりました。これは、ルートの更新 -> 再レンダリングにより有効になるはずです。ただし、CSS モジュールをロードするとエラーが発生します。

これは私のルーター設定です：

これは私のアプリでの私の機能です:

私のデフォルトのルートは油圧なので、エラーが発生しています：

キャッチされないエラー: 「is-english/hydraulics」CSS モジュールが定義されていません。

私のwebpack cssモジュールローダーの構成なのだろうか：

水力学.jsx で、次のように CSS をインポートしています。

私が理解していないのは、css モジュールが「is-english」からロードされる理由です。その「is-」プレフィックスはどこから来ているのですか? また、ファイルは英語のサブフォルダーにはなく、水力学.jsx と同じフォルダーにあります。

それとも、ルートの配置方法と関係があるのでしょうか?

postcss-loader および css モジュールを使用して、スタイルの配列を React コンポーネントに渡したいと考えています。css ファイルをコンパイルするための私の webpack.config.file は次のようになります。

私の React コンポーネント ファイルは次のようになります。

className にスタイルを 1 つだけ渡すと、正しくロードされますが、配列を渡すと、それらのいずれも解決されません。代わりに、コンパイル クラス名にコンマを付けて連結します。

複数のスタイルを要素に渡すにはどうすればよいですか?

私のreactjsプロジェクトにcssモジュールを使用しています。グローバルcssクラスを使用しようとしているファイルは次のとおりです。

ここに私のstyles.cssがあります

しかし、それは機能していません。インポートを間違えていると思います。グローバル css をインポートしてアプリケーションで使用するにはどうすればよいですか?

さて、私は初心者なので愚かな間違いをお詫び申し上げます。

CSS モジュールを React コンポーネントで動作させようとしています。私のコードは次のとおりです。

CSSはただ

そしてwebpack構成：

コードを実行したいときに問題が発生します。インクルードscssするかcssファイルするかに関係なく、常に取得しています

私に何ができる？