由于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的其他方法是什么？

代码就 在这里

Answer 1

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

错误的原因是,

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

- >首先../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文件的Porper方式是这样的(来自你的react组件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

希望,这将清除你所有的疑虑.