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 선택하기

서버를 시작하고 브라우저를 자동으로 엽니다.

Reference

이 문제에 관하여(LWC의 공통 스타일 시트 (CSS)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/MADAOU/items/05b08251dcbece091574

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다