問題タブ [css-modules]

そこで、CSS モジュールの webpack ローダーを使用します。

css?modules&importLoaders=1&localIdentName=[path]_[name]_[local]_[hash:base64:5]

styleName各プロパティを、通常生成されるジェネリック クラス名だけでなく、別の単純なクラスにもコンパイルしたいと考えています。

例: コード

<div styleName="CLASS-NAME" />

にコンパイルされるようになりました

<div class="path_filename_CLASS-NAME_12345" />

そして、私はそれをコンパイルしたい

<div class="_CLASS-NAME path_filename_CLASS-NAME_12345" />

アプリとコンポーネントの名前の間隔については、次の規則があります。

CSS モジュールを使用したいのですが、これをどのように変換して、アプリとコンポーネントの名前のスペーシングの特定性を維持するのかがわかりません。#app-nameID全体を単純に省略できることは理解していますが、この種の特異性が必要です。

考え？

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

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

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

ReactJS と CSS モジュールを使用するプロジェクトに取り組んでおり、各反応コンポーネントには対応する SASS ファイルがあります。

CSS を記述すると、各クラスに「トリプル アンダースコア ランダム文字列」が追加されます。.myClass__e7G3A

私のアプリは、スクロール位置に応じて body タグにクラス (top' または 'down') を追加し、コンポーネントがこれに応答するようにします。

私が抱えている問題は、.topまたは.downCSSモジュール内に追加すると、そのクラスの最後にも一意の識別子が追加されることです。

例えば

JSX:

レンダリングされた HTML:

SASS ファイル:

コンパイル済み CSS:

望ましい CSS 結果: (一意.topの.down識別子なし)

単純な識別子またはこれを達成できる何かが欠けていると確信しています。

お役に立てれば幸いです。ありがとう。

_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ますか? グローバル変数を宣言する単一の場所?

ST3 でCSS モジュールcomposes:セレクターを使用していますが、セミコロンからピンク色の強調表示を削除する方法がわかりません。どんな助けでも大歓迎です。