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

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

  • There is a bug and work-around given in this answer Commented Aug 2, 2020 at 9:19

2 Answers 2


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.


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


  1. LWC - You can do it like above with loadStyle:
import { loadStyle } from 'lightning/platformResourceLoader';
renderedCallback() {
                    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',
        )}" />
  • 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. Commented Jun 17, 2020 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
    Commented Jun 23, 2020 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 Commented Sep 13, 2020 at 5:49
  • @AbhinavGupta Sounds like it needs deployed. Have you deployed the styles component correctly?
    – Fawn
    Commented Sep 14, 2020 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. Commented Nov 9, 2020 at 7:39

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.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .