The stylesheet does not load because the MIME type is text / html

Question

When starting the MERN application on firefox, this error appeared in the browser console and css was 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 in the index.htmlfollowing way:

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

Where am I going wrong?

What are other ways to add external CSS for sections other than React components?

Code 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"

The reason for the error is

you are only allowed access to the public directory when it is displayed in the browser, therefore

→ - ../src/css/ , , HTML

→ -, CSS :

<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" />

---

css ( js ):

import './css/component.css';

(react-scripts start) React css js .

---

, CSS , CSS ( 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" />

, , :

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

, .

Answer 2

MiniCssExtractPlugin, , " . ' .

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

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

//correct way should be like this

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

Hide result

, .

Answer 3

I moved the css and js folder to the public directory and referred to component.cssas

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

It worked for me ..

Any better way?

Answer 4

You must verify that the file exists on the server. I found the reason because there is no file (or missing) when downloading the source code to the server. Therefore, when the CSS file is not found, the server returns the HTML MIME type