+ Start a Discussion
akkkakkk 

How to add the external css in lwc ?

Hi all,

how to add the External (bootstrap css) in lwc
i have this but its not working
folder structure is  bootstrap/bootstrap.min.css

import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import bootstrap from '@salesforce/resourceUrl/bootstrap';

export default class BootstrapComp extends LightningElement {
    renderedCallback() {
        Promise.all([
           
            loadStyle(this, bootstrap + '/bootstrap.min.css'),
        ])
            .then(() => {
                alert('Files loaded.');
            })
            .catch(error => {
                alert(error.body.message);
            });
    }
}
Thanks
akkk
mukesh guptamukesh gupta
Hi ,

Your code is correct, Can you plase if any error raise in console

Regards
Howard69Howard69
  • Create a Lightning web component that contains only a CSS file. ...
  • Create a component that contains a CSS file and a configuration file. ...
  • Define the style rules in the CSS file. ...
  • In the CSS file of a Lightning web component, import the CSS module.
Howard69Howard69
The beauty of Lightning Component Framework is the uniform UI which is consistent in Lightning Design System. So, the styles of Custom Lightning Component and Standard Lightning Component are in uniform. All elements using lightning namespace use Lightning Design System.

krogereschedule (https://www.krogereschedule.org/)