Refer static resource of CSS in Lighting component

csslightninglightning-aura-components

I have upload one CSS file in static resource may I know how can we refer it in Lightning Component ??

File Name uploaded as static Resource- bootstrap.css

Static Resource Name-CssFile

Also I have added the CSS code under style in component do i need to remove it.
Please advise ??

Best Answer

In Aura, use ltng:require:

<ltng:require styles="{!$Resource.CssFile}" />

In LWC, use loadStyle:

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

// ... some time later ... //
loadStyle(this, STATIC_RESOURCE_NAME).then(
  () => {
    // do whatever you need to do after styles load
  }
)
Related Topic