共通の CSS モジュールを使用して Lightning Web のスタイルの一貫したデザインを作成しましょう。スタイルを CSS モジュールで定義して、そのスタイルを共有するコンポーネントにモジュールをインポートします。
1 つ以上の CSS モジュールをインポートできます。インポートしたスタイルルールは、インポートされていないスタイルルールと同様にテンプレートに適用されます。Lightning Web Components では、CSS カスケードアルゴリズムがサポートされています。
1/* myComponent.css */
2
3/* Syntax */
4@import "namespace/moduleName";
5
6/* Example */
7@import "c/cssLibrary";
8
9/* Note: Lightning web components can access modules only from the c and lightning namespaces
10under Lightning Locker. If Lightning Web Security is enabled, Lightning web components
11can access modules from other namespaces. */@import についての詳細は、「MDN web docs: @import (MDN Web ドキュメント: @import)」を参照してください。MDN では @import {url} と @import {url list-of-media-queries} の 2 つの構文ステートメントが示されています。LWC では {list-of-media-queries} は考慮されません。
CSS ファイルと設定ファイルを含む Lightning Web コンポーネントを作成します。フォルダとファイル名が同じである必要があります。このコンポーネントが CSS モジュールです。
1cssLibrary
2 ├──cssLibrary.css
3 └──cssLibrary.js-meta.xmlCSS ファイルでスタイルルールを定義します。
1/* cssLibrary.css */
2h1 {
3 font-size: xx-large;
4}設定ファイルでは次のタグのみが必要です。
1<!-- cssLibrary.js-meta.xml -->
2<?xml version="1.0" encoding="UTF-8" ?>
3<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
4 <apiVersion>49.0</apiVersion>
5 <isExposed>false</isExposed>
6</LightningComponentBundle>Lightning Web コンポーネントの CSS ファイルに CSS モジュールをインポートします。
1myComponent
2 ├──myComponent.html
3 ├──myComponent.js
4 ├──myComponent.js-meta.xml
5 └──myComponent.css1/* myComponent.css */
2@import "c/cssLibrary";
3
4/* Define other style rules for myComponent here */インポートしたスタイルルールは、インポートされていないスタイルルールと同様にテンプレートに適用されます。すべてのスタイルルールはカスケードされます。myComponent.html テンプレートの <h1> タグのテキストは、cssLibrary.css で定義された xx-large スタイルを使用しています。
1<!-- myComponent.html -->
2
3<template>
4 <h1>Words to the Wise</h1>
5 <p>An apple a day keeps the doctor away.</p>
6</template>lwc.dev/guide/css のプレイグラウンドでコードを試すことができます。
Tip
関連トピック
The Japanese Summer '24 guide is now live
j