2

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

1
  • There is a bug and work-around given in this answer Aug 2 '20 at 9:19
3

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

  1. LWC - You can do it like above with loadStyle:
import { loadStyle } from 'lightning/platformResourceLoader';
renderedCallback() {
                Promise.all([
                    loadStyle(this, resourcePath + '/custom.css');
                ])
}

  1. 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',
        )}" />
5
  • 1
    the first option it is not working in summer20 release org too. I mean the pre-release orgs. if you have any why its not working in pre-release orgs please explain. I am gonna test them on sandboxes and will let you know. Jun 17 '20 at 14:00
  • Hi @DanielDeepak - Sorry I did not see this sooner. Have you checked your meta.xml to make sure you are using this version? <apiVersion>49.0</apiVersion>
    – Fawn
    Jun 23 '20 at 17:36
  • developer.salesforce.com/docs/component-library/documentation/… I tried exactly the same steps in a namespace prefixed and non prefixed org with correct namespace replacements, it's not working. Gives error: No MODULE named markup://c:styles found : [markup://c:other]. My library LWC is named "styles" and it's included in "other" lwc Sep 13 '20 at 5:49
  • @AbhinavGupta Sounds like it needs deployed. Have you deployed the styles component correctly?
    – Fawn
    Sep 14 '20 at 16:39
  • The big problem with this whole setup is requirement to deploy the whole lwc folder, else It fails. This becomes tricky when the "src" directory in modularised, and project has multiple src folders. Nov 9 '20 at 7:39
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.