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

Question

在 firefox 上运行 MERN 应用程序时，在浏览器控制台中出现此错误并且 css 未加载:样式表 http://localhost:3000/src/css/component.css 未加载，因为它的 MIME 类型, “text/html”, 不是 “text/css”

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

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

我哪里错了？

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

代码是 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”

错误的原因是，

当它在浏览器上提供时，您只能访问公共(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 文件的正确方法是这样的(来自您的 react 组件 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

希望，这将消除您的所有疑虑。