ReactはVueとは異なります。Vueは、スタイルを汚染しないように、スクリプトでスコープを設定することにより、スタイルの有効なスコープを制限できます。
CSSのローカルスコープは大きな問題を解決します。w3c仕様では、CSSは常に「グローバル」です。従来のWeb開発では、最大の頭痛の種はCSSの問題に対処することです。グローバルな性質上、スタイルは明確に定義されていますが、有効になりません。他のスタイル定義によって強制的に上書きされていることが原因である可能性があります。古いプロジェクトを引き継ぐことはさらに悪夢です。ある場所のスタイルを変更しますが、他の多くの場所のスタイルを混乱させます。
CSSモジュールは、ツールレベルからローカルCSSを生成するための一連の仕様です。本質は、グローバルに一意のCSS定義を生成することです。webpackは、この一連の仕様を実装しています。
- cssモジュールはデフォルトで有効になっているため、元の.lessまたは.cssファイルの名前を.module.lessに変更するだけで済みます。
例：index.cssからindex.module.css
//index.module.css
.app {
background: red;
}
- react jsファイルで紹介されています：
mport index from './index.module.css'
- 使用する
<div className={index.App}>
123
</div>
- 点検し、
あなたはクラスが物事の束の名前であることがわかります。実際には、それはAPP-<ハッシュ値>です。このハッシュ値は、クラス名がグローバルであるように、ファイルのパスを通じて、例えば、グローバルに一意ですユニーク。グローバルに一意のCSS命名により、ローカルスコープのCSS（スコープCSS）を偽装して取得しました。CSSファイルが特定の部分のみを提供する場合、そのようなCSSファイルをCSSモジュールと呼びます。