問題タブ [css-modules]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
5 に答える
22670 参照

reactjs - クラスをcssモジュールにネストして反応させる方法は?

React プロジェクトで CSS モジュールを使用しようとしています。問題の最初の部分は、(sass を使用して) ネストされた css クラスを作成すると、内部のクラスにアクセスできるかどうかわからないことです。いくつかのコード:

すべての子の属性を変更する「メニュー表示」になることがあるラッピング クラスがありますが、React でこのようにするのは悪い習慣ですか?

メニューが表示されている場合に変更される .header 内に複数のクラスがあるため、ラッピング クラスを変更するだけで便利です。何らかの方法で子を参照できますか? scssに入れ子になったままですか?

編集

私が考えることができる 1 つの解決策は、className="menu" を className={styles.header.menu} に置き換えることですが、それはうまくいかないようです。問題は、親がメニュー表示クラスを持っている場合、.menu の属性を変更したいということです。

0 投票する
1 に答える
177 参照

reactjs - 反応でcss-moduleを使用していますか?

反応:

運命のノード: ここに画像の説明を入力

CSS スタイル:

ここに画像の説明を入力

webpack.config:

Instagramと同じように、CSSモジュールをReactプロジェクトに追加したい react-css-modules.

しかし、2 つの問題を見つけます。

1: css-module を部分的に使用できますか? すべての子ノードはHomePageContainer-home-page-wrap-Ql_jWcss スタイルを失い、home-page-wrap-normal.

プロジェクト全体で className を sytleName に置き換える必要があるようです。styleName と className を両方とも正しい css スタイルで使用する場所を選択できる方法はありますか。

2:開発モデルで sourceMap を開くことはできますか? base64 のクラスを読み取ることができません。元のクラス名とコンパイル済みのクラス名を接続する sourceMap が必要です。

0 投票する
2 に答える
1202 参照

reactjs - 「構成」がbabel-plugin-react-css-modulesで機能しない

React プロジェクトで CSS モジュールを使用しようとしています。私は次のようなことができます:

そして、私のスタイルは CSS から取得され、正常にプレフィックスが付けられます。しかし、CSS モジュールの「compose」機能を使おうとすると、完全に無視されているようです。他のファイルからインポートすることすらしていません-ローカルクラスを作成しようとしているだけです。ただし、デモ プロジェクト ( https://github.com/gajus/babel-plugin-react-css-modules/tree/master/demo ) を複製し、CSS に「構成」を追加すると、機能します。私のコードとデモのコードの違いがわかりません...

私のwebpackローダーは次のとおりです。

これは私の.babelrcです: