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

Question

我在一个网站上工作，该网站使用 gulp 进行编译和浏览器同步，以使浏览器与我的更改保持同步。

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.

现在，我真的不明白为什么会这样。

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

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

样式表目前是 Bootstrap 和超赞字体样式的合并（还没有自定义）。

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

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

但我一直收到错误消息。

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

Answer 1

您可以打开 Google Chrome 工具，select 网络选项卡，重新加载您的页面并找到 CSS 的文件请求并查找它是什么在文件里面。

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

Answer 2

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

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

不同的东西

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

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

Answer 3

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

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

请注意 /public 末尾没有正斜杠，因此您需要将其包含在 HTML:

的 href 选项中

href="/css/style.css">

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

Answer 4

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

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

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

像这样：

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

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

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

真正的解决方案：

只需删除 . 就可以了

Answer 5

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

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

express.static built-in Express 中的中间件函数以及您的 .html 文件中的此函数：<link rel="stylesheet" href="style.css">

Answer 6

根据 Angular 结构创建一个文件夹 below/above style.css 文件并提供 link 如 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Answer 7

对于其他使用 Angular-CLI 并发布到网络服务器上的 sub-folder 的人，请查看此答案：

当您部署到域中的 non-root 路径时，您需要手动更新 dist/index.html.

中的 <base href="/"> 标签

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

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

Answer 8

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

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

然后我改成了

<base href="/">

然后它运行良好。

Answer 9

您文件中的评论会触发此问题。 有些压缩器不会删除评论。

还有

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

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

您需要正确处理这些文件。

在我的例子中，两者都是问题所在，所以我在 CSS 链接前添加了“/css/styles.css”前缀。

示例：

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

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

Answer 10

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

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

但是，当我将样式文件夹移动到与 index.php 文件相同的目录时，我就不再收到错误消息，并且样式已完美激活。

Answer 11

如果您没有正确引用 CSS 文件，也会出现此错误。

例如，如果您的 link 标签是

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

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

Answer 12

再次检查文件的名称和路径。在我的例子中，目标文件夹中有类似这样的内容：

lib
    foobar.bundle.js
    foobr.css

还有这个link：

<link rel="stylesheet" href="lib/foobar.css">

我猜想浏览器试图加载 JavaScript 文件并抱怨它的 MIME 类型而不是给我一个找不到文件的错误。

Answer 13

我遇到了同样的问题，经过几个小时的调试，我发现它与无法写入的临时文件有关。

转到管理 → 配置 → 文件系统。设置正确的临时目录。确保您的服务器有权写入该目录。

Answer 14

我在 Angular 中遇到了这个错误。我解决它的方法是在我的 link 元素上放置一个 ngIf，这样它就不会出现在 DOM 中，直到我的动态 URL 被填充。

可能和OP有点关系，但我还是来这里寻找答案的。

<link *ngIf="cssUrl" rel="stylesheet" type="text/css" [href]="sanitizer.bypassSecurityTrustResourceUrl(cssUrl)">

Answer 15

出现此问题的主要原因之一是尝试加载的 CSS 文件不是有效的 CSS 文件。

原因：

无效的 MIME 类型
在样式中有 JavaScript 代码 sheet -（可能由于不正确的 Webpack 捆绑器配置而发生）

检查您尝试加载的文件是否是有效的 CSS 样式 sheet（从网络选项卡获取文件的服务器 URL 并点击一个新的选项卡并验证）。

在 body 标签内使用时需要考虑的有用信息。

尽管正文中有一个 link 标签并不是使用该标签的标准方式。但是我们可以将它用于页面优化（更多信息：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery）/如果业务用例需要（当您提供内容主体并且服务器配置为必须呈现包含内容的 HTML 页面时提供）。

虽然保留在 body 标签内，但我们必须在 link 标签中添加属性 itemProperty，例如

<body>
    <!-- … -->
      <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
    <!-- … -->
</body>`

有关 itemProperty 的更多信息，请查看 https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document。

Answer 16

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

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

Answer 17

我遇到了这个问题。

我拒绝应用“http://m.b2b-v2-pre1.jcloudec.com/mobile-dynamic-load-component-view/resource/js/resource/js/need/layer.css?2.0”中的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

更改路径可以解决此问题。

Answer 18

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

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

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

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

一切正常。如果您使用的是 Bootstrap 模板，请试试这个。

Answer 19

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

它将帮助您摆脱错误。

Answer 20

我遇到了同样的问题。

如果您的项目结构如下图所示：

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

Answer 21

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

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

Answer 22

我遇到了同样的问题，在我的情况下，这是由于我手动尝试在 HTML 文件中导入 (s)CSS 文件（就像我们一直做的那样）静态网站），而实际上文件必须导入到 Webpack 使用的入口点 JavaScript 文件中。

当样式表被导入到主 JavaScript 文件中时，而不是在 HTML 中手动编写，一切都按预期工作。

Answer 23

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

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

对此：

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

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

Answer 24

this thread的解决方案解决了我的问题：

Not sure if this will help anyone, but if you are using angular-cli, I fixed this by removing the CSS reference from my index.html and adding it to the angular-cli.json file under the "style" portion. After restarting my webserver I no longer had that issue.

Answer 25

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

给定这个简单的文件夹结构：

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

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

Answer 26

重新保存 .ts 文件（强制 Ionic 重建）为我解决了这个问题。

其实没有什么意义……但只要有用，我又能评判谁呢？

在这里我看到了这个解决方法：

Answer 27

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

Answer 28

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

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

Answer 29

Bootstrap 样式未加载 #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

对我有用。

Answer 30

我尝试重新启动 Windows 机器并重新安装了 "npm i"。

对我有用。

Answer 31

当我将一个网站移动到 localhost 和 PhpStorm 时，我遇到了这个问题。

这在网上运行良好：

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

但是对于本地主机，我需要去掉斜线：

    <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">

Answer 32

当您将 cli 工具用于 reactjs 或 angular 时会发生此问题，所以关键是从这些工具中复制整个最终构建，因为它们初始化它们是自己的精简服务器，这会将您的 URL 与您创建的后端服务器混淆......获取整个构建文件夹并将其转储到您的资产文件夹中后端服务器项目并从你的后端服务器引用它们，而不是 Angular 或 Reactjs 附带的服务器，否则你将它用作某个 API 服务器

的前端

Answer 33

可能是你有授权问题好友：

尝试以下步骤：

转到 ISS -> 找到列出的项目 -> 点击它 -> 在右窗格中的操作下点击编辑权限
您将看到您的项目属性向导。单击证券
在组或用户名下 -> 如果您看到 'Authenticated users'，那么您已获得授权，如果没有，则您必须这样做。
添加后（您自己添加，或者如果您在公司工作，则在管理员的帮助下:)），网站将开始加载资源。您可能需要在 ISS 下重新启动您的项目。

谢谢

Answer 34

我遇到了这个问题，在向 Azure B2C 用户流添加自定义外观时遇到了同样的问题。我发现 html 页面引用的根目录是 ../oauth/v2（即 oauth 服务器路径），而不是我的存储 bob 的路径。

输入完整的 url 页面解决了我的问题。

Answer 35

检查您是否启用或禁用了压缩。如果您使用它或有人启用它，那么 app.use(express.static(xxx)) 将无济于事。确保您的服务器允许压缩。

当我将 Brotli 和压缩插件添加到我的 Webpack 时，我开始看到类似的错误。那么你的服务器也需要支持这种类型的内容压缩。

如果您使用的是 Express，那么以下内容应该有所帮助：

app.use(url, expressStaticGzip(dir, gzipOptions)

模块被调用：express-static-gzip

我的设置是：

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}

Answer 36

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

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

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

Answer 37

此错误的另一个原因可能是 CSS 文件权限不正确。在我的例子中，文件无法访问，因为所有权已更改为 root 用户——这是由于以 root 用户推送 Git 文件而发生的。

Answer 38

在我的例子中，它是 Grunt 任务运行的执行顺序。

它正在执行设置本地服务器的任务 connect，并在执行 less 和 postcss t运行之前自动在新选项卡中打开应用程序样式。

基本上，我改变了这个：

grunt.registerTask('default', 'Start server. Process styles.', ['connect', 'less', 'postcss']);

为此：

grunt.registerTask('default', 'Process styles. Start server.', ['less', 'postcss', 'connect']);

它奏效了！希望对其他人也有帮助。

Answer 39

如果浏览器找不到相关的 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";

Answer 40

您必须导入了多个样式表。尝试删除一个并重试

Answer 41

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

import 'path/to/stylesheet.css';

Answer 42

我遇到了类似的错误，发现错误是在 style.css link href 的末尾添加了“/”。

将 <link rel="stylesheet" href="style.css/"> 替换为 <link rel="stylesheet" href="style.css"> 解决了问题。

Answer 43

如果您使用的是 Node 应用程序，请确保 \public 文件夹位于根文件夹的正下方，而不是在 views 文件夹中。这会变得很麻烦。将 \public 移动到根目录下，然后重新启动服务器并见证更改。

Answer 44

在我的例子中，我必须确保 link 是相对的并且 rel 属性在 href 属性:

之后

<link href="/assets/styles/iframe.css" rel="stylesheet">

Answer 45

我几乎尝试了所有给定的解决方案，对我来说问题是我在 IIS 中没有 MIME types option，也就是说我缺少这个 Windows 功能。

对我来说 solution 是：

"And if you're on a non-server OS like Windows 8 or 10, do a search on the start page for "Turn Windows features on or off" and enable: Internet Information Services -> World Wide Web Services -> Common HTTP Features -> Static Content"

启用 IIS 静态内容

Answer 46

我知道这可能是断章取义，但链接一个不存在的文件可能会导致这个问题，因为它发生在我身上。

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

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

Answer 47

我遇到了同样的问题。

I change my directories' permission to "755" now all the files are loading.

你也可以试试我的回答。我希望这对你有用。如果答案适合您，请毫不犹豫地为答案投票。祝你好运。

Answer 48

我用 select2 遇到了这个挑战。在我下载了最新版本的库并替换了我项目中的那个（css 和 js 文件）后，它就解决了。

Answer 49

进入我的浏览器控制台 > 网络 > style.css ...点击它，它显示 "cannot get /path/to/my/CSS"，这告诉我我的 link 是错误的。我将其更改为我的 CSS 文件的路径。

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

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

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

总结...检查您的浏览器 CSS link 指向的位置。

Answer 50

在我的例子中，问题在更改 .scss 文件中的随机值后就解决了。重新加载后问题消失，样式开始加载良好。简单，但有效：P

Answer 51

我在 XAMPP 中使用了虚拟域并遇到了这个问题。所以在 httpd-vshosts.conf 文件中，当我检查时，我已经明确指向 index.php 文件，这导致了问题。

所以我改了这个：

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/cv/index.php"
    ServerName cv.dv
</VirtualHost>

到这个：

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/cv/"
    ServerName cv.dv
</VirtualHost>

然后文件加载没有问题。

Answer 52

在我的 angular-ionic 项目中，我有一个这样的 css 组件条目，它只会在我请求时加载。

 .searchBar {
    // --placeholder-color: white;
    // --color: white;
    // --icon-color: white;
    // --border-radius: 20px;
    // --background: color:rgba(73,76,67,1.0);
    // --placeholder-opacity: 100%;
    // background-color: red;
  }

一旦我注释掉 css class 条目中的所有值，它就会再次开始工作。

我认为这是因为将这些属性 background-color 与 --background 放在一起。

Answer 53

这是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 目录设置为 /public，如果 Node 实际上是运行，这将是一个有效路径]打字稿。但是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")));

Answer 54

除了使用：

<base href="/">

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

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

Answer 55

我是如何解决这个问题的。对于 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>

Note: It will work for http://localhost:3000/public/assets/css/custom.css. But couldn't work after build. You need to set app.use(express.static(__dirname + '/public')); for Express

Answer 56

我想就此主题分享一些想法，当我放置 app.use(expres.static('../frontEnd/public')) 它不起作用，但是当我使用 app.use(express.static('/frontEnd/public')) 它工作正常，我希望这会对某人有所帮助

Answer 57

每个人的评论都没有帮助我，解决方案是修复路由，因为我从主页上找到了文件，但是当我导航时它消失了，正确的解决方案是把这些东西放好

Answer 58

我也有同样的问题：这是解决方法，不要在 css link 的路径中写 public您的 .html 文件。尽管您的 .css 文件存在于 public 文件夹中。

示例：- js文件

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

html 文件

使用这个

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

而不是

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

Answer 59

另请检查您的文件名中是否有拼写错误。发生在我身上：

style.css.css

Answer 60

添加 express 默认静态中间件为：

进口快递const express = require("express")

初始化快递const app = express()
app.use(express.static(__dirname));

那么你需要使用 public directory 的完整路径
例如：
你的文件结构 public directory

public > css > style.css

你的路径将是
<link rel="stylesheet" type="text/css" href="./public/css/style.css"/>

NOTE1: 您可以使用任何名称而不是 public 即 assets myassets any other NOTE2:您的服务器应该在主目录中损坏如果您的服务器在子目录中损坏然后你可以使用 ../

出来

Answer 61

https://github.com/froala/angular-froala/issues/170#issuecomment-386117678 找到上面添加

的解决方法

href="/">

就在 index.html

中的样式标签之前

Answer 62

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

Answer 63

遇到了类似的问题并使用这个简单的修复方法解决了它。如果您的项目是基于 React 的，那么与其将“styles.css”导入“index.html”，不如将其导入“index.js”，它通常位于项目的“src”文件夹中。这将确保您的 React 应用程序中的所有路由都可以访问样式文件。

Answer 64

我在 ejs 和 nodejs

中遇到了同样的问题

我已经像这样设置了我的视图引擎 public 文件夹

app.use('/public', express.static(process.cwd() + '/public'));

app.set('view engine', 'ejs');

我的目录结构是这样的

public

| -资产

| --CSS

|---style.css

我正试图 link 我的 Style.css 在 ejs 的头上是这样的

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

通过添加 public 解决了问题（确保检查网络选项卡）

<link href="/public/assets/css/style.css" rel="stylesheet" type="text/css">

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

Stylesheet not loaded because of MIME-type

html

css

mime-types

gulp

browser-sync

Bootstrap 样式未加载 #3411

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