node js - refused to apply css (MIME type text/html)

Question

I am trying to implement my css in my html with nodeJS, Express and socket.io but i got the error:

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

Note: I only got the error displaying the css files when i run in my localhost:8000 (Node.js) but not in my normal index.html file.

here is my config in index.js

var app = express()
   .use(SocketIOFileUpload.router)
   .get('/', function (req, res) {
      res.sendFile(__dirname + '/index.html');
   })

here is my files structure

style
style.css

images

lib

node_modules

index.html
appConfig.js
index.js

So far, what i did is:

i change my css script from

<link rel="stylesheet" type="text/css" href="style/style.css"/> into type="text/html" : it did remove the error but my css still have not applied in the html

checked the spelling of my css file name: no issue on the name or the css path

i have search all over the internet, but nothing helps. It might be i configured it wrongly since i am not really familiar with the config, but i don't have any ideas. Any helps or hints area really helpful. Thanks!

Why do you want to display your css files in the website? That is not a common practice. — Jeroen Heier
Duplicated : https://stackguides.com/questions/60240603/nodejs-mime-type-text-html-is-not-a-supported-stylesheet-mime-type — Maxime P

Khanal Khanal · Accepted Answer · 2018-06-19T02:46:21

Can you list your directory structure here? The initial error is that you wanted to apply css to your html file but the css file when returned by node had a mine type of html. When applying style if you manually set the mine time to html for a css file, it’s certainly not going to work. What is your css file name and path? A speculation I have is that your app is not configured to serve the css file. When asked for the css file, the server is probably responding with a 404 which is a mime type of html, hence the error. Look at your nose console logs when you load the page for a 404 for the css. You’ll have to show us where/how you are serving static files for us to help any further. Yep you have the style.css inside of style, you need to set the static directory accordingly. Here is a reference

app.use(express.static('public'))

taken from https://expressjs.com/en/starter/static-files.html In your case you can wrap your images and styles folder under public and then use the given example. In production however, you will want to serve static files using a reverse proxy like Nginx.

node js - refused to apply css (MIME type text/html)

2 Answers