問題タブ [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.
reactjs - クラスをcssモジュールにネストして反応させる方法は?
React プロジェクトで CSS モジュールを使用しようとしています。問題の最初の部分は、(sass を使用して) ネストされた css クラスを作成すると、内部のクラスにアクセスできるかどうかわからないことです。いくつかのコード:
すべての子の属性を変更する「メニュー表示」になることがあるラッピング クラスがありますが、React でこのようにするのは悪い習慣ですか?
メニューが表示されている場合に変更される .header 内に複数のクラスがあるため、ラッピング クラスを変更するだけで便利です。何らかの方法で子を参照できますか? scssに入れ子になったままですか?
編集
私が考えることができる 1 つの解決策は、className="menu" を className={styles.header.menu} に置き換えることですが、それはうまくいかないようです。問題は、親がメニュー表示クラスを持っている場合、.menu の属性を変更したいということです。
reactjs - 反応でcss-moduleを使用していますか?
反応:
CSS スタイル:
webpack.config:
Instagramと同じように、CSSモジュールをReactプロジェクトに追加したい
react-css-modules
.
しかし、2 つの問題を見つけます。
1: css-module を部分的に使用できますか? すべての子ノードはHomePageContainer-home-page-wrap-Ql_jW
css スタイルを失い、home-page-wrap-normal
.
プロジェクト全体で className を sytleName に置き換える必要があるようです。styleName と className を両方とも正しい css スタイルで使用する場所を選択できる方法はありますか。
2:開発モデルで sourceMap を開くことはできますか? base64 のクラスを読み取ることができません。元のクラス名とコンパイル済みのクラス名を接続する sourceMap が必要です。
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です: