問題タブ [css-modules]

div色の値が変更されたときに背景を変更しようとしています。色の値を受け取る私の関数は次のとおりです。

ここにcssクラスがあります

そして、実行時に背景を更新する必要がある私の div 要素を次に示します。

refs synatx についてよくわからないので、この問題の修正を手伝ってください。ありがとう。

Babel および ES6 構文を使用して React でインジケーター コンポーネントをプログラミングしており、CSS モジュールを使用しているコンポーネントのスタイルを設定しています。コンポーネントは正常に動作していますが、コードの品質を改善したいと考えています。

インジケーターの各状態で、ドットの色が変わります。

スタイルを定義する CSS は、CSS モジュールと compose キーワードを使用します

このアプローチについて 2 つの質問があります。

• 使用されているすべての色をクラスに再割り当てしてから、条件に応じて割り当てるのは少し面倒です。何か足りないものはありますか？
• React で状態と classNames の割り当てを処理するより良い方法はありますか? これは単純な例ですが、他のコードに非常に厄介な条件がいくつかあり、それらを避けたいと考えています。

私はreact-css-modulesを調べてきましたが、これまでのところ、コード全体に styles.class があってもかまわないと思います。

現在、スタイリングにReactでCSSモジュールを使用しています。したがって、各コンポーネントは、次のようにコンポーネント固有の css ファイルにインポートされます。

個々のコンポーネントのスタイルを設定する場合はこれで問題ありませんが、コンポーネント固有ではないグローバル スタイル (html、body、header タグ、div など) を適用するにはどうすればよいですか?

SASS を使用すると、次のエラーが発生しますmap-get。

sass-loaderこれは、と別のローダーの両方を使用した場合にのみ発生します。

これは PostCSS Loader が原因だと最初は思っていましたが、sass-loading が問題を引き起こし、使用時に scss を変換していないようcss-modulesです。

問題を示すサンプル リポジトリを作成しました: https://github.com/tiemevanveen/sass-css-components-fail-example。

さまざまなブランチを使用してテストできます。

• master: CSS モジュール + SASS
• postcssCSS モジュール + SASS + PostCSS
• log-source: CSS モジュール + SASS +カスタム ソース ロギング モジュールを使用
• no-css-modules: SASS +カスタム ソース ロギング モジュール

最初と最後のブランチのみがエラーなしで実行されます。

sass-loader が何を返すかを確認するために log-source の例を作成しましたが、sass を変換していないように見えます(ただし、これはローダーの動作を誤解している可能性もあります)。

css モジュールを使用しない他の例は、正しく変換されたコードを示しています。

マスター ブランチ (postcss または別のカスタム ローダーなし) が正常に動作している理由がわかりません。

問題を提出しましたが、これは特定の問題であり、構成の問題である可能性があるため、StackOverflow でより多くの可能性があると考えています。これが私のwebpack構成です：

TLDR:css-modules通常のと組み合わせる方法sass、できれば でwebpack。

セットアップ:

私は、e コマース Web サイトのスタイリング ビルド プロセスに取り組んでいます。現在、サイトのスタイルは、 gulp browserifyビルド プロセスを通じてjsと共にsassで作成されています。

最近、react with webpackおよびbabelを使用して構築された単一ページ アプリを追加しました。そのアプリケーション内で、webpackによって提供されるcss-modulesを利用して、クラス名を各反応コンポーネントにスコープします。

問題：

css-modulesサイトのメインのスタイリング バンドルにwebpack ビルドのスタイルを組み込みたいと考えています。これを行うために、サイト全体のスタイルを構築するための webpack 構成を構築することを検討していました。私が抱えている問題は、単一ページの webpack 構成によって現在構築されているスタイルを取得し、サイト全体のスタイルを処理するグローバルな webpack 構成にスタイル チャンクだけを挿入する方法です。2 つの構成を可能な限り分離したいと思います。

質問：

• 一方が他方からチャンクを使用できる Webpack ビルドを分離する適切な方法はありますか?

• もしそうなら、css-moduleセットアップが単一ページ構成にとどまりextract-text-webpack、退屈なsassビルドに伴う部分がグローバル構成になるようにするにはどうすればよいですか?

• css-modulesそうでない場合、sass の 1 つのセクションをワークフローに通し、それをサイトの残りの部分のバンドルと組み合わせるにはどうすればよいでしょうか。

前もって感謝します。

@Alexandr Subbotinの回答に基づいて編集し、Webpackを更新して以下のコードのようにしました。コードは雇用主のものであるため、名前とパスを変更する必要がありました。そのため、わずかなエラーがある可能性があります。

私が取り組んでいるプロジェクトでは、css モジュールをpostcss(またpostcss-cssnextとpostcss-include) と共に使用します。グローバルに提供される依存関係としてブートストラップもあります。

特定のコンポーネントには、ボタンのカスタム クラスがあります。したがって、私のボタンには次のクラスがありますbtn btn-custom。

要件に従って、ボタンがアクティブな状態のときにボタンの外観を変更したいと考えています。そのため、ブートストラップには次のセレクターがあります: .btn.active, .btn:active. 疑似クラスの上書きは簡単です。ただし、.activeクラスは難しいところです。

私のcssファイルで、これを処理する方法をいくつか試しましたが、うまくいかないようです。ここに私が試したことのいくつかがあります：

これをどのように達成できるかについて誰か考えがありますか?

反応内で css モジュールを使用しようとしていますが、機能していません。

このコードのログ:

オブジェクト {} を返します

レンダリングされたコードは、クラスのないタグです。

css コードはサイトで入手できます。ここに私の test.css があります。

div を class='test' に変更すると、p の色が青に変わります

これが私のwebpack.config.jsです

誰でも私を助けることができますか？

前もって感謝します。