[SalesForce] MIME type (‘text/html’) is not a supported stylesheet MIME type, in open source LWC

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

Best Answer

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);
}
Related Topic