Question

在firefox上运行MERN应用程序时，在浏览器控制台中出现此错误并且未加载css：The stylesheet http://localhost:3000/src/css/component.css was not loaded because its MIME type, “text/html”, is not “text/css”

我正在向index.html添加CSS，如下所示：

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

我哪里错了？

除了React组件之外，还为其他部分添加外部css的其他方法是什么？

代码为Here

Answer 1

样式表http://localhost:3000/src/css/component.css不是因为其MIME类型“text / html”不是“text / css”
而加载

错误原因是，

在浏览器上提供时，您只能访问公共目录，所以

- ＆GT;通过这种方式首先FromIterator<&str>您无法访问该文件，它会将此视为路由并尝试为您提供HTML

- ＆GT;其次，这不是包含css文件的正确方法：

../src/css/

使用css文件的方式是这样的（来自你的反应组件js文件）：

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

（import './css/component.css';）React会自动将您的css文件转换为js并应用它。

如果你想在反应之外使用css文件，你需要将所有css文件放在公共文件夹中（最好放在public / css中）

react-scripts start

如果您仍有疑问，请阅读：

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'
});

希望这对您有所帮助。

Answer 3

我将文件夹css和js移动到公共目录，并将component.css引用为

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

它对我有用..

有更好的方法吗？

Answer 4

您必须检查服务器上是否存在该文件。我找到了原因，因为在将源代码上传到服务器时没有文件（或丢失）。因此，当找不到CSS档案时，伺服器会传回html MIME类型

样式表未加载，因为MIME类型为text / html

4 个答案: