問題タブ [react-css-modules]

React/Redux と CSS モジュールを使用して Web アプリに取り組んでいます。単体テストでは、identity-obj-proxyを使用して CSS インポートをモックしています。

ただし、QA チームは、Selenium を使用する場合に難読化されたクラス名をどのように処理するかを考えています (私自身は完全に慣れていません)。私が見つけることができた2つの組み合わせについての唯一の言及はこの質問ですが、受け入れられた答えはQAにとって明確ではありませんでした。

この状況で Selenium を使用するための解決策は何ですか?

CSS コンポーネントを使用したシナリオに頭を悩ませようとしています。独自のクラスを使用する反応コンポーネントがあります。このコンポーネントには、独自のクラスを持つ小さなヘルパー サブコンポーネントがあります。現在: メイン コンポーネントの特定の状態が設定され、特定のクラスが適用されると、ヘルパー コンポーネントの css がそのクラスに反応する必要があります。

例えば：

• コンポーネント A はコンポーネント B を使用して何かを表示します。
• コンポーネント A がクリックされ、react がそのコンポーネントに「クリックされた」クラスを設定します
• コンポーネント B は、そのクラスで視覚的に反応する必要があります

プレーンな CSS (または同様のもの) では、次のようにします。

コンポーネント A:

コンポーネント B

これを行うには反応する方法があることを知っています。この種のことは、この種の状況が完全に回避されるように、コンポーネント間で渡される状態と小道具で行う必要があります。しかし、私は現在、これらの問題がまだ残っているプロジェクトを再構築しています.react-css-modulesでこれを適切に行う方法が本当にわかりません.

ちなみに、私の現在の回避策は :global を使用していますが、これは避けたいと思っています...

_color.scss変数として 400 色で構成されるファイルがあります。そして、スタイルでこの色変数を必要とする 20 個のコンポーネントが好きです。

スタイルを構築するために SCSS + CSS モジュールを使用しています。今のところ、私はこれ_color.scssをすべてのコンポーネントのstyle.scss.

例：

component1.scss

component2.scss

component3.scss

以前は、SCSS スタンドアロンを使用していたときに、color.scssを自分index.scssにインポートし、その下にある他のすべてのスタイルをインポートしていました。これにより、変数はすべてのコンポーネントで使用できるようになります。

例：

これで、下のすべての変数が、および_color.scssの下で使用できるようになります。component1.scsscomponent2.scsscomponent3.scss

でこれと同様のことを行う方法はありCSS Modules + SCSSますか? グローバル変数を宣言する単一の場所?

Jest、React、PostCSS でテストを実行しようとしています。を使用して、react-css-modules なしで正常に動作させることができましたclassName={styles.*}。また、CSSモジュールについては、ES2015プロキシを使用できますが役に立ちませんでした。

テストの失敗:

スタックトレース：

反応：

運命のノード:

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 が必要です。

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

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

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

これは私の.babelrcです：