Stylesheet not loading because MIME type is text/html

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.

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.

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