Html 由于 MIME 类型，未加载样式表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48248832/
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 loaded because of MIME-type
提问by Nick
I'm working on a website that uses gulpto compile and browser sync to keep the browser synchronised with my changes.
我正在一个网站上工作，该网站gulp用于编译和浏览器同步以使浏览器与我的更改保持同步。
The gulp task compiles everything properly, but on the website, I'm unable to see any style, and the console shows this error message:
gulp 任务正确编译了所有内容，但是在网站上，我看不到任何样式，并且控制台显示此错误消息：
Refused to apply style from 'http://localhost:3000/assets/styles/custom-style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
拒绝应用来自“ http://localhost:3000/assets/styles/custom-style.css”的样式，因为它的 MIME 类型（“text/html”）不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。
Now, I don't really understand why this happens.
现在，我真的不明白为什么会发生这种情况。
The HTML includes the file like this (which I am pretty sure is correct):
HTML 包含这样的文件（我很确定这是正确的）：
<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>
And the stylesheet is a merge between Bootstrap & font-awesome styles for now (nothing custom yet).
样式表目前是 Bootstrap 和 font-awesome 样式之间的合并（还没有自定义）。
The path is correct as well, as this is the folder structure:
路径也是正确的，因为这是文件夹结构：
index.html
assets
|-styles
|-custom-style.css
But I keep getting the error.
但我不断收到错误消息。
What could it be? Is this something (maybe a setting?) for gulp/browsersync maybe?
会是什么呢？这是gulp/browsersync的东西（也许是设置？）吗？
采纳答案by Nick
The issue, I think, was with a CSS library starting with comments.
我认为，问题在于以注释开头的 CSS 库。
While in development, I do not minify files and I don't remove comments. This meant that the stylesheet started with some comments, causing it to be seen as something different from CSS.
在开发过程中，我不会缩小文件，也不会删除评论。这意味着样式表以一些注释开始，使其被视为与 CSS 不同的东西。
Removing the library and putting it into a vendor file (which is ALWAYS minified without comments) solved the issue.
删除库并将其放入供应商文件（它总是在没有注释的情况下缩小）解决了这个问题。
Again, I'm not 100% sure this is a fix, but it's still a win for me as it works as expected now.
同样，我不是 100% 确定这是一个修复，但它仍然是我的胜利，因为它现在按预期工作。
回答by JPaulino
For Node.js applications, check your configuration:
对于 Node.js 应用程序，请检查您的配置：
app.use(express.static(__dirname + '/public'));
Notice that /publicdoes not have a forward slash at the end, so you will need to include it in your href option of your HTML:
请注意，/public末尾没有正斜杠，因此您需要将其包含在 HTML 的 href 选项中：
href="/css/style.css">
If you did include a forward slash (/public/) then you can just do href="css/style.css".
如果您确实包含了一个正斜杠 ( /public/)，那么您就可以这样做href="css/style.css"。
回答by John Deverall
This error can also come up when you're not referring to your CSS file properly.
当您没有正确引用 CSS 文件时，也会出现此错误。
For example, if your link tag is
例如，如果您的链接标签是
<link rel="stylesheet" href="styles.css">
but your CSS file is named style.css(without the second s) then there is a good chance that you will see this error.
但是您的 CSS 文件已命名style.css（没有第二个 s），那么您很有可能会看到此错误。
回答by Tharaka
In most cases, this could be simply the CSS file path is wrong. So the web server returns status: 404with some Not Foundcontent payload of htmltype.
在大多数情况下，这可能只是CSS 文件路径错误。因此，Web 服务器会返回status: 404一些类型的Not Found内容有效负载html。
The browser follows this (wrong) path from <link rel="stylesheet" ...>tag with the intention of applying CSS styles. But the returned content type contradicts so that it logs an error.
浏览器遵循这个（错误的）<link rel="stylesheet" ...>标签路径，目的是应用 CSS 样式。但是返回的内容类型自相矛盾，因此它会记录错误。
回答by Gopi G.A
Make a folder just below/above the style.css file as per the Angular structure and provide a link like <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.
根据 Angular 结构在 style.css 文件的正下方/上方创建一个文件夹，并提供一个类似 .css 的链接<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">。
回答by Amandeep Saini
I had this error for a Bootstrap template.
我有一个 Bootstrap 模板的错误。
<link href="starter-template.css" rel="stylesheet">
Then I removed the rel="stylesheet"from the link, i.e.:
然后我rel="stylesheet"从链接中删除了，即：
<link href="starter-template.css">
And everything works fine. Try this if you are using Bootstrap templates.
一切正常。如果您使用 Bootstrap 模板，请尝试此操作。
回答by Sebastian Vorá?
I have changed my 'href' -> 'src'. So from this:
我已经改变了我的“href”->“src”。所以从这个：
<link rel="stylesheet" href="dist/photoswipe.css">
<link rel="stylesheet" href="dist/photoswipe.css">
to this:
对此：
<link rel="stylesheet" src="dist/photoswipe.css">
<link rel="stylesheet" src="dist/photoswipe.css">
It worked. I don't know why, but it did the job.
有效。我不知道为什么，但它完成了工作。
回答by metal_Hymane1
Comments in your file will trip this. Some minifiers will not remove comments.
您文件中的评论会导致此错误。一些压缩器不会删除评论。
ALSO
还
If you use Node.jsand set your static files using expresssuch as:
如果您使用Node.js并使用以下方法设置静态文件express：
app.use(express.static(__dirname + '/public'));
You need to properly address the files.
您需要正确处理这些文件。
In my case both were the issue, so I prefixed my CSS links with "/css/styles.css".
就我而言，两者都是问题所在，因此我在 CSS 链接前添加了“/css/styles.css”。
Example:
例子：
<link type="text/css" rel="stylesheet" href='/css/styles.css">
This solution is perfect as the path is the main issue for CSS not getting rendering
这个解决方案是完美的，因为路径是 CSS 无法渲染的主要问题
回答by dvlsc
I simply referenced the CSS file (an Angular theme in my case) in the stylessection of my Angular 6 build configuration in angular.json:
我只是在 angular.json 中我的 Angular 6 构建配置的样式部分引用了 CSS 文件（在我的例子中是一个 Angular 主题）：
This does not answer the question, but it might be a suitable workaround, as it was for me.
这不能回答问题，但它可能是一个合适的解决方法，就像对我一样。
回答by Jitendra G2
As mentioned solutions in this post, some of the solutions worked for me, but CSS does not apply on the page.
正如这篇文章中提到的解决方案，一些解决方案对我有用，但 CSS 不适用于页面。
Simply, I just moved the "css" directory into the "Assest/" directory and everything works fine.
简单地说，我只是将“css”目录移动到“Assest/”目录中，一切正常。
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >
