How to use static resource to style Lightning Web Components?

Here is a sample code on how to import and use static resources for styling your lwc.

I zipped my CSS file into folder and uploaded this into a static resource called ‘myResource’. Here is the JS code you would need to import this static Resource into your component.

import { LightningElement, track } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import myResource from '@salesforce/resourceUrl/myResource';
export default class CssExample extends LightningElement {
    @track textVal;
    changeHandler(event) {
        this.textVal = event.target.value;
    }
    renderedCallback() {
        Promise.all([
            loadStyle(this, myResource + '/styleSheet.css')
        ]).catch(error => {
             // eslint-disable-next-line no-console
             console.log(error);
            
        });
    }
}

Here is how you can use a style class that you have defined inside the static resource:

That’s it. Hope it helps 🙂