cssの「部分的な」スタイル
sass、@importを介さない、部分的に解決されたCSSはモジュール化された質問です。
css はグローバルであるため、インポートされたファイルと現在のファイルが同じ名前である場合、前者のスタイルは後者のスタイルによって上書きされます。
パブリックコンポーネントを導入したり、複数人で同じページを共同開発する場合、スタイルが上書きされないか考慮する必要があり、非常に面倒です。
// file A
.name {
color: red
}
// file B
@import "A.scss";
.name {
color: green
}
css グローバル スタイルの特性により、css の保守が困難になるため、css の「ローカル」スタイルに対する解決策が必要です。
つまり、完全な CSS モジュール化です。 @import 受信 CSS モジュールは、それ自体の内部スコープを非表示にする必要があります。
CSS モジュールの原則
各クラス名の後に一意のハッシュ値を追加すると、グローバルな名前の競合がなくなります。これは、「ローカル」スタイルを偽造することに相当します。
// 原始样式 styles.css
.title {
color: red;
}
// 原始模板 demo.html
import styles from 'styles.css';
<h1 class={styles.title}>
Hello World
</h1>
// 编译后的 styles.css
.title_3zyde {
color: red;
}
// 编译后的 demo.html
<h1 class="title_3zyde">
Hello World
</h1>
webpack と CSS モジュール
webpack 独自の css-loader コンポーネントには、簡単な設定で使用できる CSS モジュールが付属しています。
{
test: /\.css$/,
loader: "css?modules&localIdentName=[name]__[local]--[hash:base64:5]"
}
命名規則は BEM から拡張されています。
ブロック: 対応するモジュール名
[name]要素: 対応するノード名
[local]#修飾子: 対応するノードのステータス
[hash:base64:5]
____ と -- It を使用しますブロック内の単語の分割ノードを区別することです。
最終的なクラス名は styles__title--3zyde です。
本番環境での利用
実際の本番ではsassと組み合わせて使うと便利です。以下はsassで使用するwebpackの設定ファイルです。
{
test: /\.scss$/,
loader: "style!css?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!sass?sourceMap=true&sourceMapContents=true"
}
通常、ローカル スタイルに加えて、base.css やその他の基本ファイルなどのグローバル スタイルも必要です。
パブリック スタイル ファイルとコンポーネント スタイル ファイルを 2 つの異なるターゲットに配置します。次のように。
. ├── app │ ├── styles # 公用样式 │ │ ├── app.scss │ │ └── base.scss │ │ │ └── components # 组件 ├── Component.jsx # 组件模板 └── Component.scss # 组件样式
次に、webpack 構成を使用して、app/styles フォルダーの外にある scss ファイルを「ローカライズ」(除外)します。
{
test: /\.scss$/,
exclude: path.resolve(__dirname, 'app/styles'),
loader: "style!css?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!sass?sourceMap=true&sourceMapContents=true"
},
{
test: /\.scss$/,
include: path.resolve(__dirname, 'app/styles'),
loader: "style!css?sass?sourceMap=true&sourceMapContents=true"
}
要素に複数のクラス名がある場合があります。join(" ") または文字列テンプレートを使用して要素に複数のクラス名を追加できます。
// join-react.jsx
<h1 className={[styles.title,styles.bold].join(" ")}>
Hello World
</h1>
// stringTemp-react.jsx
<h1 className={`${styles.title} ${styles.bold}`}>
Hello World
</h1>
1 つのクラスを記述するだけでスタイルを定義できる場合は、すべてのスタイルを 1 つのクラスに記述することが最善です。
したがって、複数のクラスを使用してスタイルを定義する場合、通常は論理的な判断が必要になります。この時点で書くのはさらに面倒になります。
クラス名の導入により、要素に複数のクラス名を記述する問題や、論理判断を記述するという面倒な問題が解決されます。
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
CSSモジュールのスタイルモジュールを導入すると、各クラスで毎回styles.xxxを書かなければならず、これも非常に面倒です。 react-cssについては「徹底解説」で触れました。 React Technology Stack」 - コードの記述を軽減するための modules ライブラリ。興味のある学生はそれを学習できます。
推奨学習: 「css ビデオ チュートリアル 」