由于MIME类型为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 :

 <link rel="stylesheet" type="text/css" href="../src/css/component.css" />

Where am I going wrong ?

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

Code is Here

Answer 1

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 :

<link rel="stylesheet" type="text/css" href="../src/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../src/css/demo.css" />
<link rel="stylesheet" type="text/css" href="../src/css/component.css" />

---

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)

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.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.

Answer 2

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.

Answer 3

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

<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/component.css" />

It worked for me..

Any Better way ??

Answer 4

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