Stylesheet not loading because MIME type is text/html

Question

While running a MERN app on firefox, got this error in browser console and css is not loaded: The stylesheet http://localhost:3000/src/css/component.css was not loaded because its MIME type, “text/html”, is not “text/css”

I am adding CSS to index.html like this :

Where am I going wrong ?

What are the other ways to add external css for sections apart from the React components ?

Code is Here

user_2349407 · Answer

The stylesheet http://localhost:3000/src/css/component.css was not loaded because its MIME type, “text/html”, is not “text/css”

Reason for the error is,

you are allowed to access only public directory when its served on browser, so

-> First ../src/css/ by this way you can't access the file , it will consider this as route and try to give you html

-> Second , This is not the proper way to include css files :

Proper way to use the css file is like this ( from your react component js file ) :

import './css/component.css';

(react-scripts start) React will automatically convert your css file into js and applies it.

Still if you want to use css files outside of react, you need to put all css files inside public folder (good to put inside public/css)

If you still have doubts please read :

https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started

Hope, this will clear all your doubts.

user_1326699 · Answer

You have to check that file exist on server. I found the reason, because there are no file (or missing) when upload source code to the server. So when the css file not found, server returns html MIME type

user_9997476 · Answer

Im using MiniCssExtractPlugin and i realized missing '.' will caused below issue.

from

filename: '/style.[contenthash].css'

to

filename: './style.[contenthash].css'

//correct way should be like this

new MiniCssExtractPlugin({
  publicPath: './sass/',
  filename: './style.[contenthash].css'
});

Hope this help you.

user_6283268 · Answer

I moved the folder css and js to public directory and referenced the component.css as

It worked for me..

Any Better way ??

Stylesheet not loading because MIME type is text/html

4 Answers