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

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

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

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

href="/css/style.css">

如果您确实包含了正斜杠 (/public/)，那么您只需执行 href="css/style.css"。

---

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

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

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

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

---

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

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

https://i.stack.imgur.com/PHWIq.png

---

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

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

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

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

---

我在 Bootstrap 模板中遇到了这个错误。

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

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

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

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

---

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

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

对此：

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

有效。我不知道为什么，但它完成了工作。

---

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

https://i.stack.imgur.com/yp5Ly.jpg

---

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

还

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

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

您需要正确处理文件。

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

例子：

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

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

---

除了使用：

<base href="/">

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

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

---

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

https://i.stack.imgur.com/RUsFE.jpg

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

---

我知道它可能与上下文无关，但链接一个不存在的文件可能会导致这个问题，因为它发生在我身上。

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

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

---

正如本文中提到的解决方案，一些解决方案对我有用，但 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" >

---

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

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

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

像这样：

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

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

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

真正的解决方案：

只需删除它就可以工作的.

---

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

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

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

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

---

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

<base href="./"> 在 index.html 中

然后我改为

<base href="/">

然后它工作得很好。

---

当我将它移动到 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">

---

我曾经也有过一样的问题。

如果您的项目的结构类似于以下树：

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 安装这个包。

---

您可以打开 Google Chrome 工具，选择网络选项卡，重新加载您的页面并找到 CSS 的文件请求并查找文件中包含的内容。

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

---

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

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

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

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

---

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

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

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

---

我是如何解决这个问题的。对于 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。但构建后无法工作。您需要设置 app.use(express.static(__dirname + '/public'));快递

---

有时，当找不到 css 文件时会发生这种情况。值得检查您的基本网址/文件路径

---

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

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

Express 中的 express.static 内置中间件函数以及 .html 文件中的这个：

---

通过进入我的浏览器控制台 > 网络 > 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 链接指向的位置。

---

这是特定于 Typescript+Express

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

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

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

├── 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")));

---

https://github.com/froala/angular-froala/issues/170#issuecomment-386117678 找到了上面添加的解决方案

href="/">

就在 index.html 中的样式标记之前

https://i.stack.imgur.com/8wrOx.png

---

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

import 'path/to/stylesheet.css';

---

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

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

---

就我而言，当我实时部署包时，我将它从公共 HTML 文件夹中取出。这是有原因的。

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

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

---

如果您将 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";

它将帮助您摆脱错误。

---