Node won't allow CSS because MIME type text/html is not a supported stylesheet

Question

I am trying to load a stylesheet in a HTML file that is served from Node Express, but I keep getting this error:

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

I have looked at similar questions here on SO, but none have solved the problem. I added type=text/css to the links and tried all possible kinds of different paths to the css file.

None of these links will load the CSS file:

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" type="text/css" href="/create/style.css">
<link rel="stylesheet" type="text/css" href="./create/style.css">
<link rel="stylesheet" type="text/css" href="http://localhost:3000/create/style.css">

Folder structure

server.js
    create(folder)
       -index.html
       -style.css

server.js

const app = require('express')()
const http = require('http').createServer(app)

app.get('/create', function (req, res) {
    res.sendFile(__dirname + '/create/index.html');
})

http.listen(3000, function () {
    console.log('listening on *:3000')
});

Here is a thread for serving static files, the guy had the same MIME issue : stackoverflow.com/questions/50182092/… — Dali

Dali Dali · Accepted Answer · 2019-07-23T11:24:22

None of these links will load the CSS file

Yes, the problem is the MIME type associated with the file, changing the link won't change the MIME type. Except if you serve a different route with a different MIME type for the same file (do you ?).

The MIME type of interest here is text/css.

You need to change the header of your HTTP request before sending it.

You can do this with express by setting the options when calling sendFile() :

Node won't allow CSS because MIME type text/html is not a supported stylesheet

1 Answers