1

Below is my file structure in open source LWC

enter image description here

in my index.html I am trying to reference bootstrap as follows

<link rel="stylesheet" href="./bootstrap/css/bootstrap.css" crossorigin="anonymous">

but when page loads on localhost, i get below on the console log.

localhost/:1 Refused to apply style from 'http://localhost:3001/bootstrap/css/bootstrap.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I also tried

<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" crossorigin="anonymous">

or

<link rel="stylesheet" href="/bootstrap/css/bootstrap.css" crossorigin="anonymous">

or

<link rel="stylesheet" href="bootstrap/css/bootstrap.css" crossorigin="anonymous">

I have also tried above all combinations with type="text/css" and type="css"

error remains same with type="text/css" and with type="css" error goes but not able to use any bootstrap class.

tried with and without crossorigin="anonymous"

there are similar questions already posted but the same answers don't work, please let me know what am I missing.

below is my css folder.

css folder

1 Answer 1

1

this is weird, I cut paste CSS folder from bootstrap to resources folder and changed

<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" crossorigin="anonymous">

to

<link type="text/css" rel="stylesheet" href="./resources/css/bootstrap.css">

and it is working for index.html but to make it work for app.html I have added the below constructor in the app.js

for the time being it is working as mentioned in the this thread

constructor() {

    super();
    const styles = document.createElement('link');
    styles.href = './resources/css/bootstrap.css';
    styles.rel = 'stylesheet';
    this.template.appendChild(styles);
}
4
  • While I understand this is the only possible workaround at the moment, modifying the DOM in constructor is a bad practice in LWC [Check out: developer.salesforce.com/docs/component-library/documentation/…. Shouldn't this be done in connectedCallback or renderedCallback instead?
    – arut
    Aug 16, 2020 at 6:35
  • Would you please share the link again, it is not working
    – gs650x
    Aug 16, 2020 at 6:37
  • 1
    Sorry, I missed to check the URL in my comments. Here you go, its in the LWC developer guide: developer.salesforce.com/docs/component-library/documentation/…
    – arut
    Aug 16, 2020 at 6:43
  • yes this suggests connected callback, thank you for pointing it out
    – gs650x
    Aug 16, 2020 at 12:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .