accessing CSS static resource in Lighting Web Component

Question

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 1

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')