accessing CSS static resource in Lighting Web Component

by

How do you access (referencing) CSS static resource file in Lightning Web Component (LwC) html? I have included the css under the “staticresources” folder and its uploaded in the salesforce static resource section.

I am referring this help doc but don’t see how to reference css –
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_resources

Answer

You will most likely need to utilize loadStyle(self, fileUrl): Promise
 from lightning/platformResourceLoader. You can find a sample on Use Third-Party JavaScript Libraries

The platformResourceLoader module has two methods, loadScript and loadStyle. Both methods return promises, which can be chained or used in parallel. You control the load sequence of your scripts or styles.

import resourceName from '@salesforce/resourceUrl/resourceName';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';

loadStyle(this, resourceName + '/yourstyle.css')

Attribution
Source : Link , Question Author : am101 , Answer Author : Jayant Das

Leave a Comment