Как я могу использовать общий файл CSS для каждого компонента LWC?

/* common style */
h1{
    font-size: 2rem;
    color:rgb(102, 94, 94);
}

Например, я хочу использовать этот файл CSS в каждом компоненте. Могу ли я импортировать их с помощью javascript или статического ресурса?

пожалуйста, не просите меня включать этот CSS во все таблицы стилей компонентов

2
Daniel Deepak 16 Янв 2020 в 17:34
В этом ответе есть ошибка и обходной путь.
 – 
salesforce-sas
2 Авг 2020 в 12:19

2 ответа

Лучший ответ

Есть несколько разных вариантов:

  1. Совместное использование стилей CSS между компонентами LWC (обновление Summer 20'):

Создайте компонент, содержащий файл CSS и файл конфигурации.

>custom.css
>custom.js-meta.xml

Затем импортируйте его в компонент, в котором вы хотите использовать файл CSS.

/** myComponent.css **/
@import 'c/custom';

/* Define other style rules for myComponent here */

https://releasenotes.docs.salesforce.com/en-us/summer20/release-notes/rn_lwc_css_share.htm

  1. LWC — вы можете сделать это, как указано выше, с помощью loadStyle:
import { loadStyle } from 'lightning/platformResourceLoader';
renderedCallback() {
                Promise.all([
                    loadStyle(this, resourcePath + '/custom.css');
                ])
}

  1. Загрузка статического ресурса CSS в пользовательскую тему — работает как для LWC, так и для Aura. Это хорошее решение, если вы все еще используете оба типа веб-компонентов.

Для ауры:

        <ltng:require styles="{!join(',',
            $Resource + '/styles/custom.css',
        )}" />
3
azimut3 11 Фев 2021 в 16:26
1
Первый вариант тоже не работает в релизе Summer20. Я имею в виду предрелизные организации. если у вас есть какие-либо причины, по которым он не работает в предварительных версиях организаций, объясните. Я собираюсь протестировать их на песочницах и дам вам знать.
 – 
Daniel Deepak
17 Июн 2020 в 17:00
Привет, @DanielDeepak. Извини, что не увидел этого раньше. Вы проверили свой meta.xml, чтобы убедиться, что используете эту версию? 49.0
 – 
Fawn
23 Июн 2020 в 20:36
developer.salesforce.com/docs/component-library/documentation/ … Я пробовал точно такие же шаги в организации с префиксом пространства имен и без префикса с правильной заменой пространства имен, это не работает. Выдает ошибку: МОДУЛЬ с именем markup://c:styles не найден: [markup://c:other]. Моя библиотека LWC называется «стили» и включена в «другие» lwc.
 – 
Abhinav Gupta
13 Сен 2020 в 08:49
Похоже, его нужно развернуть. Правильно ли вы развернули компонент стилей?
 – 
Fawn
14 Сен 2020 в 19:39
Большая проблема со всей этой настройкой заключается в необходимости развернуть всю папку lwc, иначе это не удастся. Это становится сложным, когда каталог «src» имеет модульную структуру, а проект имеет несколько папок src.
 – 
Abhinav Gupta
9 Ноя 2020 в 10:39

Вы правы в своем предположении, что импортируете их с помощью javascript. Вы должны загрузить свой общий css в статический файл ресурсов.

// Do this once in your outer most lwc container.
import myCommonStyles from '@salesforce/resourceUrl/myCommonStyles';
import { loadStyle } from 'lightning/platformResourceLoader';

constructor() {
    // If the static resource is a file structure, then concatenate the 
    // file path with the imported reference.
    // @example myCommonStyles + '/file/path/styles.css'
    loadStyle(this, myCommonStyles)
        .then(result => {
            // Possibly do something when load is complete.
        })
        .catch(reason => {
            // Checkout why it went wrong.
        ]);
}

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_ Third_Party_library

2
Benjamin David 16 Янв 2020 в 20:26