Importing a common CSS in LWC

Question

How can I use a common CSS file across every LWC component?

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

For Example I want to use this CSS file in every component. Can I import them using javascript or a static resource?

please don't ask me to include this CSS in every components stylesheet

Answer 1

There are a few different options:

1. Share CSS styles among LWC components (Summer 20' update):

Create a component that contains a CSS file and configuration file.

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

Then import it in the component you want to use the CSS file in.

/** 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

2. LWC - You can do it like above with loadStyle:

import { loadStyle } from 'lightning/platformResourceLoader';
renderedCallback() {
                Promise.all([
                    loadStyle(this, resourcePath + '/custom.css');
                ])
}

3. Loading static CSS resource into a custom theme - works for both LWC and Aura. This is a nice solution if you are still using both types of Web Components.

For aura:

        <ltng:require styles="{!join(',',
            $Resource + '/styles/custom.css',
        )}" />

Answer 2

You are correct in your assumption of importing them using javascript. You have to load your common css in a static resource file.

// 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