Javascript 样式表未加载，因为 MIME 类型为 text/html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47151492/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stylesheet not loading because MIME type is text/html
提问by Shubham
While running a MERN app on firefox, got this error in browser console and css is not loaded: The stylesheet http://localhost:3000/src/css/component.css was not loaded because its MIME type, “text/html”, is not “text/css”
在 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”
I am adding CSS to index.htmllike this :
我正在添加 CSSindex.html像这样：
<link rel="stylesheet" type="text/css" href="../src/css/component.css" />
Where am I going wrong ?
我哪里错了？
What are the other ways to add external css for sections apart from the React components ?
除了 React 组件之外，还有哪些其他方法可以为部分添加外部 css？
Code is Here
代码在 这里
回答by Vivek Doshi
The stylesheet http://localhost:3000/src/css/component.csswas not loaded because its MIME type, “text/html”, is not “text/css”
样式表http://localhost:3000/src/css/component.css未加载，因为其 MIME 类型“text/html”不是“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
->首先../src/css/通过这种方式您无法访问该文件，它会将其视为路由并尝试为您提供html
-> Second , This is not the proper way to include css files :
-> 其次，这不是包含 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" />
Proper way to use the css file is like this( from your react component js file ) :
使用 css 文件的正确方法是这样的（来自您的反应组件 js 文件）：
import './css/component.css';
(react-scripts start) React will automatically convert your css file into js and applies it.
( react-scripts start) React 会自动将你的 css 文件转换成 js 并应用它。
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)
如果你想在 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" />
If you still have doubts please read :
如果您仍有疑问，请阅读：
https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started
https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started
Hope, this will clear all your doubts.
希望，这将消除您的所有疑虑。
回答by VnDevil
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
您必须检查服务器上是否存在该文件。我找到了原因，因为上传源代码到服务器时没有文件（或丢失）。所以当找不到 css 文件时，服务器返回 html MIME 类型
回答by Sherman Lye
Im using MiniCssExtractPlugin and i realized missing '.' will caused below issue.
我正在使用 MiniCssExtractPlugin 并且我意识到缺少 ' . ' 将导致以下问题。
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.
希望这对你有帮助。
回答by Shubham
I moved the folder css and js to public directory and referenced the component.cssas
我将文件夹 css 和 js 移动到 public 目录并引用了component.cssas
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/component.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/component.css" />
It worked for me..
它对我有用..
Any Better way ??
任何更好的方法？
