CSS スタイルルールの共有

共通の CSS モジュールを使用して Lightning Web のスタイルの一貫したデザインを作成しましょう。スタイルを CSS モジュールで定義して、そのスタイルを共有するコンポーネントにモジュールをインポートします。

1 つ以上の CSS モジュールをインポートできます。インポートしたスタイルルールは、インポートされていないスタイルルールと同様にテンプレートに適用されます。Lightning Web Components では、CSS カスケードアルゴリズムがサポートされています。

@import についての詳細は、「MDN web docs: @import (MDN Web ドキュメント: @import)」を参照してください。MDN では @import {url} と @import {url list-of-media-queries} の 2 つの構文ステートメントが示されています。LWC では {list-of-media-queries} は考慮されません。

1. CSS ファイルと設定ファイルを含む Lightning Web コンポーネントを作成します。フォルダとファイル名が同じである必要があります。このコンポーネントが CSS モジュールです。

2. CSS ファイルでスタイルルールを定義します。

3. 設定ファイルでは次のタグのみが必要です。

4. Lightning Web コンポーネントの CSS ファイルに CSS モジュールをインポートします。

5. インポートしたスタイルルールは、インポートされていないスタイルルールと同様にテンプレートに適用されます。すべてのスタイルルールはカスケードされます。myComponent.html テンプレートの <h1> タグのテキストは、cssLibrary.css で定義された xx-large スタイルを使用しています。

関連トピック

• MDN: @import