由于 MIME 类型而未加载样式表答案

【问题标题】：Stylesheet not loaded because of MIME-type由于 MIME 类型而未加载样式表
【发布时间】：2021-04-03 01:15:34
【问题描述】：

我正在开发一个使用gulp 编译和浏览器同步的网站，以使浏览器与我的更改保持同步。

gulp 任务可以正确编译所有内容，但是在网站上，我看不到任何样式，并且控制台显示此错误消息：

拒绝应用样式来自 'http://localhost:3000/assets/styles/custom-style.css' 因为它 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且已启用严格的 MIME 检查。

现在，我真的不明白为什么会发生这种情况。

HTML 包含这样的文件（我很确定这是正确的）：

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

样式表现在是 Bootstrap 和 font-awesome 样式之间的合并（还没有自定义）。

路径也是正确的，因为这是文件夹结构：

index.html
assets
|-styles
  |-custom-style.css

但我不断收到错误消息。

可能是什么？这可能是 gulp/browsersync 的东西（可能是设置？）？

【问题讨论】：

当我的链接样式表以 html
当您为文件设置了不正确的 URL 或服务器配置不正确时，就会发生这种情况。结果，浏览器没有获得样式表，但它获得了一些带有 404 状态和“Content-Type”标头的 HTML。由于浏览器从服务器获取了一些东西，它不会告诉你没有回复，而是告诉你文件的 MIME 类型不正确。检查它的最快方法是尝试在新选项卡中直接打开文件http://localhost:3000/assets/styles/custom-style.css。
对我来说就是 RussCoder 描述的情况。这背后的原因是我使用了 Angular 并忘记在 angular.json 中的样式包装中添加一个 css 文件。所以在构建应用程序时它被忽略了。
我可以通过 spring 安全配置来解决这个问题。它阻止了对资源文件夹的访问。
错误的proxy.conf.json 设置导致我们出现这个奇怪的错误，因为转发到后端 API 的请求无法正常工作，因此 HTML 错误响应。

标签： html css gulp mime-types browser-sync

【解决方案1】：

对于 Node.js 应用程序，请检查您的配置：

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

请注意，/public 末尾没有正斜杠，因此您需要将其包含在 HTML 的 href 选项中：

href="/css/style.css">

如果您确实包含正斜杠 (/public/)，那么您可以直接使用 href="css/style.css"。

【讨论】：

href="/assets/style.css"> 在我的情况下解决了这个问题！
没有“/”我可以在带有 url 的页面中加载 css；本地主机：3000/api/用户。但是当我有一个添加变量的链接（.../users?id=5397538945734）时，它会给出错误。当我在 css 链接中添加斜杠时，它可以工作。多么奇怪！？

【解决方案2】：

我认为问题在于以 cmets 开头的 CSS 库。

在开发过程中，我不会缩小文件，也不会删除 cmets。这意味着样式表以一些 cmets 开头，导致它被视为与 CSS 不同的东西。

删除库并将其放入供应商文件（始终在没有 cmets 的情况下缩小）解决了该问题。

同样，我不能 100% 确定这是一个修复，但它仍然是我的胜利，因为它现在按预期工作。

【讨论】：

解决了一半，因为如果您不想将所有这些 css 放在 vendor 中，您应该怎么做？每次测试应用程序时都最小化 node_modules？呵呵……你有没有找到一些东西来编译某个模块？
在我的编译过程中，供应商文件仅在构建时创建，然后我只关注我实际正在处理的文件的更改（通常不会进入供应商）。这意味着第一次构建有点慢，但是我只是编译我的文件而不进行缩小，这不会减慢我的进程
我遇到了同样的问题，发现我试图将服务器上存在的文件的缩小版本作为非缩小文件加载。所以，当服务器上的文件是“custom-style.css”时，我试图加载“custom-style.min.css”。更改链接以加载正确的资源后，一切正常。
问题不仅限于 CSS。我还在一个 JS 文件上得到了 404，这是由第一行中的注释引起的。
我的情况没有出现错误。这对我有用。谢谢。

【解决方案3】：

当您没有正确引用您的 CSS 文件时，也会出现此错误。

例如，如果你的链接标签是

<link rel="stylesheet" href="styles.css">

但您的 CSS 文件名为 style.css（没有第二个 s），那么您很有可能会看到此错误。

【讨论】：

正是发生在我身上的事情。我在这里尝试了每个答案（更改 mimetype，删除 CSS cmets，更改 node.js 配置......）。我所要做的就是修正 CSS 名称中的一个错字。哇！
要添加到这个答案，请确保 gulp 确实找到了 css 文件并将其通过管道传输到您的 dist。每当我收到此错误时，都是因为我以某种方式搞砸了 css 文件的路径，它只是在构建目录中不存在。
是的，对我来说也是一样，一个简单而愚蠢的错字。我认为服务器发送一个 404 响应页面是做什么的，所以你的浏览器得到那个 404 页面并告诉你它不是正确的 css ......这是真的。
FWIW，当 Sharepoint 权限导致访问被拒绝时，我也遇到了同样的问题。我必须将经过身份验证的用户添加到 SP 站点。一如既往，感谢 Stack Overflow 社区为我指明了正确的方向。干杯! ?
就我而言，我没有将 style.css 上传到服务器。呵呵..

【解决方案4】：

在大多数情况下，这可能只是 CSS 文件路径错误。所以 Web 服务器返回 status: 404 和一些 Not Found 内容负载 html 类型。

浏览器从<link rel="stylesheet" ...> 标记遵循这条（错误的）路径，目的是应用CSS 样式。但是返回的内容类型矛盾，因此会记录错误。

【讨论】：

我的问题是路径无效。但是，这个糟糕的路径是由于我的 Angular 项目的基本 href 设置不正确造成的。如果其他人在更新您的基本 href 后开始看到此错误，则可能是原因。
感谢您不厌其烦地完整清楚地记录 CSS 文件上的 404 错误如何产生这个（最初）令人费解的错误消息
另一种故障排除方法，将出现此错误的网址粘贴到另一个选项卡中，如果您没有看到 CSS，则可能是问题

【解决方案5】：

Bootstrap 模板出现此错误。

<link href="starter-template.css" rel="stylesheet">

然后我从链接中删除了rel="stylesheet"，即：

<link href="starter-template.css">

一切正常。如果您使用的是 Bootstrap 模板，请尝试此操作。

【讨论】：

根据Living Standard (4.2.4)，“链接元素必须具有rel 属性或itemprop 属性，但不能同时具有两者。” 因此，删除rel 属性只是删除了包含样式表的功能。

【解决方案6】：

我已将我的href 更改为src。所以从这里：

<link rel="stylesheet" href="dist/photoswipe.css">

到这里：

<link rel="stylesheet" src="dist/photoswipe.css">

成功了。我不知道为什么，但它确实起到了作用。

【讨论】：

虽然它也对我有用，但这是一个有效的属性吗？
@sr9yar 你是对的，根据validator.w3.org，在链接中包含 src 是无效的，所以它作为一个快速修复程序很好，但只要你有更多的时间，我建议找到另一个更有效的解决方法。

【解决方案7】：

根据 Angular 结构在 style.css 文件的下方/上方创建一个文件夹，并提供类似 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 的链接。

【讨论】：

为什么会这样？错误指出“text/html”不是受支持的 MIME 类型。
在我的情况下，错误消失了，但是没有应用 css 样式.. :/
我确实花了更多时间阅读有关此问题的信息，并将 css 文件的类型更改为其他可能会导致严重问题，例如 css 被服务器读取为 html
在 AngularDart 中，index.html 的根目录是“web”文件夹，而不是项目主文件夹。所以所有的 css 文件都必须在 web 文件夹中。像这样“[projectfolder]\web[yourcssfileshere]”。因此，如果您尝试导入位于 web 文件夹之外的 css 文件，它将找不到。

【解决方案8】：

您文件中的评论会导致此问题。 一些缩小器不会删除 cmets。

也

如果您使用Node.js 并使用express 设置静态文件，例如：

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

您需要正确处理文件。

在我的情况下，两者都是问题，所以我在我的 CSS 链接前加上“/css/styles.css”。

例子：

<link type="text/css" rel="stylesheet" href='/css/styles.css">

这个解决方案非常完美，因为路径是 CSS 无法渲染的主要问题

【讨论】：

【解决方案9】：

除了使用：

<base href="/">

从您的 css 链接中删除 rel="stylesheet" 部分：

<link type="text/css" href="assets/styles/custom-style.css"/>

【讨论】：

删除rel 修复了它，但问题是为什么？
它消除了错误，但它不应用样式表
删除属性 rel 对我有用。我正在使用 Angular。

【解决方案10】：

我只是在 angular.json 的 Angular 6 构建配置的 styles 部分中引用了 CSS 文件（在我的例子中是一个 Angular 主题）：

这并不能回答问题，但它可能是一个合适的解决方法，就像对我一样。

【讨论】：

这是 Angular-CLI 6 项目的正确答案

【解决方案11】：

我知道这可能与上下文无关，但链接一个不存在的文件可能会导致这个问题，就像我之前发生的那样。

<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />

如果此文件不存在，您将面临该问题。

【讨论】：

当然，如果文件不在所需的目录或命名不同，那么你就会导致这个问题

【解决方案12】：

正如本文中提到的解决方案，一些解决方案对我有用，但 CSS 不适用于页面。

简单地说，我只是将“css”目录移动到“Assest/”目录中，一切正常。

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >

【讨论】：

【解决方案13】：

对于使用 Angular-CLI 并发布到网络服务器上的子文件夹的其他人，请查看以下答案：

当您部署到域中的非根路径时，您需要手动更新 dist/index.html. 中的 <base href="/"> 标记

在这种情况下，您需要更新到<base href="/sub-folder/">

https://github.com/angular/angular-cli/issues/1080

【讨论】：

【解决方案14】：

问题是，如果你有一个相对路径，并且你导航到一个嵌套页面，那将解析到错误的路径：

<link rel="stylesheet" href='./index.css'>

所以简单的解决方案是删除.，因为我的是single-page application。

像这样：

<link rel="stylesheet" href='/index.css'>

所以它总是解析为/index.css

这个问题有很多答案，但似乎没有一个真正有效。如果您删除 rel="stylesheet"，它将停止错误但不会应用样式表。

真正的解决方案：

只需删除 . 就可以了

【讨论】：

是的，就我而言，我忘记从我的 index.html 文件中删除这些相对路径，并且在生产模式下运行 webpack。不需要这些路径，因为 webpack 通过 webpack.prod.js 动态链接 css 文件。

【解决方案15】：

当我将一个网站移动到 localhost 和 PhpStorm 时，我知道在网上工作的网站遇到了这个问题。

这在网上很好用：

    <link rel="stylesheet" href="/css/additional.css">

但是对于 localhost 我需要去掉斜线：

    <link rel="stylesheet" href="css/additional.css">

因此，我已经在此补充了一些已提供的答案 - 这可能是路径或拼写错误，而不是任何复杂的服务器设置问题。控制台中的错误是红鲱鱼；首先需要检查网络选项卡的 404。

在此处提供的答案中有一些不正确的解决方案。添加type="text/html" 或将href 更改为src 不是答案。

如果您想拥有所有属性以便在最挑剔的验证器和您的 IDE 上进行验证，则应提供媒体值，rel 应为 stylesheet，例如：

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">

【讨论】：

【解决方案16】：

我遇到了同样的问题，然后我检查了我写的：

<base href="./"> in index.html

然后我改成

<base href="/">

然后它运行良好。

【讨论】：

【解决方案17】：

我也遇到了同样的问题。

如果你的项目结构如下树：

index.html
assets
|-styles
  |-custom-style.css
server
  |- server.js

我建议在server.js 中添加以下代码：

var path = require('path')
var express = require('express')
var app = express()

app.use('/assets', express.static(path.join(__dirname, "../assets")));

注意： Path 是 Node.js 内置的模块，所以不需要通过 npm 安装这个包。

【讨论】：

【解决方案18】：

您可以打开谷歌浏览器工具，选择网络选项卡，重新加载您的页面并找到 CSS 的文件请求并查找文件中的内容。

您在合并文件中的两个库时可能做错了什么，包括一些不适合 CSS 的字符或标题？

【讨论】：

不幸的是，我确实尝试过，但它并没有真正的帮助，请求立即失败，它只有请求 url（这是正确的）

【解决方案19】：

除了一长串答案之外，这个问题也发生在我身上，因为从浏览器同步的角度来看，我没有意识到路径是错误的。

鉴于这个简单的文件夹结构：

package.json
app
  |-index.html
  |-styles
      |-style.css

index.html 中 <link> 内的 href 属性必须是 app/styles/style.css 而不是 styles/style.css

【讨论】：

确实，只是路径中的一个错字给了我同样的错误。
哇，这对我有用，非常感谢。我真的要放弃了

【解决方案20】：

如果您使用没有 JS 的 Express，请尝试：

app.use(express.static('public'));

例如，我的 CSS 文件位于 public/stylesheets/app.css

【讨论】：

【解决方案21】：

我是如何解决这个问题的。对于 Node.js 应用程序，您需要设置 **public** 文件夹配置。

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

否则，你需要像href="public/css/style.css".那样做

<link href="public/assets/css/custom.css">
<script src="public/assets/js/scripts.js"></script>

注意：它适用于http://localhost:3000/public/assets/css/custom.css。但构建后无法工作。您需要为 Express 设置app.use(express.static(__dirname + '/public'));

【讨论】：

【解决方案22】：

对于 Node.js 应用程序，只需在服务器文件中导入所有必需的模块后使用它：

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

express.static 内置中间件函数，在你的 .html 文件中：link rel="stylesheet" href="style.css">

【讨论】：

您真的不想向公众提供服务器代码吗？

【解决方案23】：

通过进入我的浏览器控制台 > 网络 > style.css ...单击它并显示“无法获取 /path/to/my/CSS”，这告诉我我的链接错误。我将其更改为我的 CSS 文件的路径。

更改前的原始路径为 localhost:3000/Example/public/style.css 将其更改为 localhost:3000/style.css 即可解决。

如果您从 app.use(express.static(path.join(__dirname, "public"))) 提供文件；或 app.use(express.static("public"));您的服务器会将“那个文件夹”传递给浏览器，因此在浏览器中添加“/yourCssName.css”链接即可解决问题

通过在浏览器 CSS 链接中添加其他路由，您将告诉浏览器在指定的路由中搜索 css。

总之...检查您的浏览器 CSS 链接指向的位置。

【讨论】：

【解决方案24】：

我正在使用React.js 应用程序，也遇到了这个错误，导致我来到这里。这对我有帮助。我没有将<link> 添加到index.html，而是在我需要使用此样式表的组件中添加了import：

import 'path/to/stylesheet.css';

【讨论】：

【解决方案25】：

这是 Typescript+Express 特有的

我 ctrl+f'd "Typescript" 和 ".ts" 并在这些答案中一无所获，所以我将在这里添加我的解决方案，因为它是由（我对 typescript 的经验不足）引起的，而我的解决方案是已阅读未明确解决此特定问题。

问题是 Typescript 正在将我的 app.ts 文件编译成我项目的 dist 目录中的 javascript 文件 dist/app.js

这是我的目录结构，看看你能不能发现问题：

├── app.ts
├── dist
│   ├── app.js
│   ├── app.js.map
│   └── js
│       ├── dbclient.js
│       ├── dbclient.js.map
│       ├── mutators.js
│       └── mutators.js.map
├── public
│   ├── css
│   │   └── styles.css
├── tsconfig.json
├── tslint.json
└── views
    ├── index.hbs
    └── results.hbs

我的问题是，在 app.ts 中，我告诉 express 将我的公共目录设置为 /public，如果 Node 实际上正在运行 Typescript，这将是一个有效路径。但是 Node 正在运行编译后的 javascript，app.js，它位于 dist 目录中。

所以app.ts 假装 dist/app.js 解决了我的问题。因此，我通过更改解决了app.ts 中的问题

app.use(e.static(path.join(__dirname, "/public")));

到

app.use(e.static(path.join(__dirname, "../public")));

【讨论】：

【解决方案26】：

删除 rel="stylesheet" 并添加 type="text/html"。所以它看起来像这样 -

<link  href="styles.css" type="text/html" />

【讨论】：

【解决方案27】：

在我的情况下，当我实时部署包时，我将它从公共 HTML 文件夹中取出。这是有原因的。

但显然已经激活了严格的 MIME 类型检查，我不太确定它是在我身边还是在我托管的公司。

但是，当我将样式文件夹移动到与 index.php 文件相同的目录中时，我就停止了错误，并且样式被完美地激活了。

【讨论】：

【解决方案28】：

如果您将 JavaScript 中的样式设置为：

    var cssLink = document.createElement("link");
    cssLink.href = "./content.component.scss";
    cssLink.rel = "stylesheet";
   --> cssLink.type = "html/css";
    (iframe as HTMLIFrameElement).contentDocument.head.appendChild(cssLink);

然后只需将 cssLint.type（上面描述中的箭头表示）更改为“MIME”：

   cssLink.type = "MIME";

它将帮助您摆脱错误。

【讨论】：

【解决方案29】：

引导样式未加载 #3411

https://github.com/angular/angular-cli/issues/3411

我安装了 Bootstrap v. 3.3.7
```
npm install bootstrap --save
```

然后我将需要的脚本文件添加到 angular-cli.json 文件中的apps[0].scripts：

"scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
],

// And the Bootstrap CSS to the apps[0].styles array

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
],

我重新启动了 ng serve

它对我有用。

【讨论】：

【解决方案30】：

如果浏览器找不到相关的css文件，可能会报这个错误。

如果您使用 Angular 应用程序，则不必将 css 文件路径放在 index.html 上

 <link href="xxx.css" rel="stylesheet"> -->

您可以将相关的css文件路径放在styles.css文件中。

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

【讨论】：

这对我来说是修复，从 index.html 中删除链接 href 并使用 styles.scss 中的导入方法。