由于MIME类型未加载样式表

秒速五厘米 2022-11-27 07:05 218阅读 0赞

本文翻译自：[Stylesheet not loaded because of MIME-type][]

*I'm working on a website that uses `gulp` to 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][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][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包含这样的文件（我很确定是正确的）：**

*And the stylesheet is a merge between Bootstrap & font-awesome styles for now (nothing custom yet).* **样式表目前是Bootstrap和超赞字体之间的合并（尚无自定义）。**

*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的东西（也许是设置吗？）？**

--------------------

### \#1楼 ###

参考：[https://stackoom.com/question/3grIY/由于MIME类型未加载样式表][https_stackoom.com_question_3grIY_MIME]

--------------------

### \#2楼 ###

*You can open the Google Chrome tools, select the network tab, reload your page and find the file request of the CSS and look for what it have inside the file.* **您可以打开Google Chrome浏览器工具，选择“网络”标签，重新加载页面并找到CSS的文件请求，然后查找文件中包含的内容。**

*Maybe you did something wrong when you merged the two libraries in your file, including some characters or headers not properly for CSS?* **合并文件中的两个库时，包括某些字符或标头不适用于CSS时，也许您做错了什么？**

--------------------

### \#3楼 ###

*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％地确定这是修复程序，但是对我来说仍然是一个胜利，因为它现在可以按预期运行。**

--------------------

### \#4楼 ###

*For Node.js applications, check your configuration:* **对于Node.js应用程序，请检查您的配置：**

app.use(express.static(__dirname + '/public'));

*Notice that `/public` does 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"` 。**

--------------------

### \#5楼 ###

*My problem is that I was using webpack and in my HTML CSS link I had a relative path, and anytime I would navigate to a nested page, that would resolve to the wrong path:* **我的问题是我使用的是webpack，并且在我的HTML CSS链接中有一个相对路径，并且每当我导航到嵌套页面时，都会解析为错误的路径：**

*so the simple solution was to remove the `.`* **所以简单的解决方案是删除`.`** *since mine is a [single-page application][] .* **因为mine是[单页应用程序][single-page application] 。**

*Like this:* **像这样：**

*so it always resolves to `/index.css`* **因此它始终解析为`/index.css`**

--------------------

### \#6楼 ###

*For a Node.js application, just use this after importing all the required modules in your server file:* **对于Node.js应用程序，只需在服务器文件中导入所有必需的模块后使用它：**

app.use(express.static("."));

*  *express.static built-in middleware function in Express and this in your .html file: < `link rel="stylesheet" href="style.css">`* **Express中的express.static内置中间件函数以及您的.html文件中的函数：< `link rel="stylesheet" href="style.css">`**

[Stylesheet not loaded because of MIME-type]: https://oldbug.net/q/3grIY/Stylesheet-not-loaded-because-of-MIME-type
[http_localhost_3000_assets_styles_custom-style.css]: http://localhost:3000/assets/styles/custom-style.css
[https_stackoom.com_question_3grIY_MIME]: https://stackoom.com/question/3grIY/%E7%94%B1%E4%BA%8EMIME%E7%B1%BB%E5%9E%8B%E6%9C%AA%E5%8A%A0%E8%BD%BD%E6%A0%B7%E5%BC%8F%E8%A1%A8
[single-page application]: https://en.wikipedia.org/wiki/Single-page_application