由于MIME类型未加载样式表

问题描述 投票：224回答：33

我正在开发一个使用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 css gulp mime-types browser-sync
33个回答
95
投票

我认为，问题在于以评论开头的CSS库。

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

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

再说一遍，我不是百分之百确定这是一个修复，但它仍然是我的胜利，因为它现在按预期工作。

12
投票

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

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

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

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

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

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

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

7
投票

我的问题是我使用的是webpack，在我的HTML CSS链接中，我有一个相对路径，并且无论何时我都会导航到嵌套页面，这将解析为错误的路径：

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

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

像这样：

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

所以它总是解决到/index.css

6
投票

您可以打开Goog​​le Chrome工具，选择网络标签，重新加载页面并查找CSS的文件请求，并查找文件中的内容。

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

5
投票

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

鉴于此简单的文件夹结构：

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

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

5
投票

我得到了同样的问题然后我检查了我写道：

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

然后我改为

<base href="/">

然后它工作正常。

5
投票

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

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

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

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安装此软件包。

4
投票

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

app.use(express.static("."));
  • Express中的express.static内置中间件函数，在你的.html文件中：<link rel="stylesheet" href="style.css">
4
投票

在我的情况下，当我正在部署包时，我把它从公共HTML文件夹中删除了。这是有原因的。

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

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

83
投票

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

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

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

href="/css/style.css">

如果你确实包括正斜杠（/public/）那么你可以做href="css/style.css"。

3
投票

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

原因：

  • MIME类型无效
  • 在样式表中包含JavaScript代码 - （可能由于不正确的Webpack bundler配置而发生）

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

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

虽然在体内有一个link标签不是使用标签的标准方式。但我们可以将它用于页面优化（更多信息：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery）/如果业务用例需要（当您提供内容和服务器的主体时，必须使用提供的内容呈现HTML页面）。

保持在body标签内部，我们必须在itemProperty标签中添加属性link

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

2
投票

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

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

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

它将帮助您摆脱错误。

2
投票

Bootstrap样式未加载＃3411

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

  1. 我安装了Bootstrap v.3.3.7 npm install bootstrap --save
  2. 然后我将所需的脚本文件添加到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" ],
  3. 我重启了发球局

它对我有用。

1
投票

三重检查文件的名称和路径。在我的情况下，我在目标文件夹中有这样的内容：

lib
    foobar.bundle.js
    foobr.css

这个链接：

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

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

1
投票

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

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

1
投票

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

它可能与OP无关，但我最终在这里寻找答案。

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

我遇到了这个问题。

我拒绝应用'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检查。

改变路径可以解决这个问题。

1
投票

我有同样的问题，在我的情况下，这是因为我手动尝试在HTML文件中导入CSS文件（就像我们一直使用静态网站），实际上文件必须是在Webpack使用的入口点JavaScript文件中导入。

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

1
投票

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

不确定这是否会对任何人有所帮助，但如果您使用的是angular-cli，我通过从index.html中删除CSS引用并将其添加到“style”部分下的angular-cli.json文件来修复此问题。重新启动我的网络服务器后，我不再遇到这个问题。

51
投票

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

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

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

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

1
投票

我试图重启我的Windows机器并重新安装“npm i”。

它对我有用。

50
投票

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

Enter image description here

38
投票

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

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

Enter image description here

26
投票

我有一个Bootstrap模板的错误。

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

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

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

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

24
投票

我改变了'href' - >'src'。所以从这个：

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

对此：

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

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

17
投票

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

Enter image description here

这不能回答这个问题，但它可能是一个合适的解决方法，因为它适合我。

14
投票

您文件中的评论将使此行为。一些minifiers不会删除评论。

也

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

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

您需要正确地处理文件。

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

例：

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.