LWCでの共通スタイルシート(CSS)

5666 ワード
Salesforce CSS LightningWebComponents Lightningコンポーネント lwc CSS テキストリンク

1.目的

今回LWCでの共通スタイルシート(CSS)の方法を共有します。

2.ソース構成図

lwc
 ├─commonStyle
 └─commonStyleChild

commonStyle

commonStyle.css
.commonCss {
    font-size: 30px;
    color: #fff;
    background-color: rgba(128, 129, 56, 0.5);
    border-radius: 2px;
    min-width: 100px;
    /** 真ん中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
commonStyle.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

commonStyleChild

commonStyleChild.css
@import 'c/commonStyle';/**ここ共通CSSをインポート*/
commonStyleChild.html
<template>
    <div class="commonCss">TEST</div>
</template>
commonStyleChild.js
import { LightningElement } from 'lwc';

export default class CommonStyleChild extends LightningElement {}
commonStyleChild.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

3.ローカルで動作確認

commonStyleChild中に右クリックし、SFDX:Preview Component Locallyを押下する

Use Desktop Browserを選択する

サーバを立ち上げて、ブラウザを自動的に開く