Html – Refused to apply style from ‘URL’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled

cssejsexpresshtmlsass

Here's my stack

  • Express
  • Ejs
  • Sass (installed by 'npm install –save-dev sass' – a dev dependency)

I'm getting an error of

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

my head tag is on a separate partials folder:

– views
– – partials
– – – header.ejs
– – index.ejs

my CSS is also on another folder

– public
– – css
– – – style.css
– – – style.css.map
– – – style.scss

my head tag looks like this:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn Web</title>
<base href="/">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>

I render my index like this:

app.get('/', (req, res) => {
    res.render('index');
})

I tried adding <base href="/">
I tried to omit rel="stylesheet"
I tried to change the type="text/css" to type="text/html" – It got rid of the error but the styles do not apply.

Thank you in advance!

Best Answer

Adding this line to your js file will allow the local css to link: app.use(express.static(__dirname));

You can read about serving static files in Express here: http://expressjs.com/en/starter/static-files.html

Related Topic