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

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”

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

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

我哪里错了？

除了 React 组件之外，还有哪些其他方法可以为部分添加外部 css？

代码是Here

Answer 1

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

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

它对我有用..

有更好的方法吗？？

Answer 2

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

错误原因是，

在浏览器上提供时，您只能访问 public 目录，因此

-> 首先 ../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 并应用它。

如果你想在 React 之外使用 css 文件，你需要将所有 css 文件放在 public 文件夹中（最好放在 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 3

您必须检查服务器上是否存在该文件。我找到了原因，因为上传源代码到服务器时没有文件（或丢失）。所以当找不到 css 文件时，服务器 returns html MIME 类型

Answer 4

我正在使用 MiniCssExtractPlugin，我意识到缺少“.”会导致以下问题。

来自

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

到

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

//correct way should be like this

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

希望对您有所帮助。

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

Stylesheet not loading because MIME type is text/html

javascript

css

node.js

mime-types

reactjs