由于MIME类型未加载样式表

HTML

小小

2020-03-23

我正在使用一个网站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和超酷字体之间的合并（尚未自定义）。

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

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

但是我一直在出错。

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

第3074篇《由于MIME类型未加载样式表》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共23个回答

Itachi 2020.03.23

仔细检查文件的名称和路径。就我而言，我在目标文件夹中有类似以下内容：

lib
    foobar.bundle.js
    foobr.css

而这个链接：

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

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

Stafan路易 2020.03.23

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

小小猪猪卡卡西 2020.03.23

我碰到了同样的问题，即向Azure B2C用户流添加自定义外观的问题。我发现的是html页所指的根是../ oauth / v2（即oauth服务器路径），而不是我的存储鲍勃的路径。

输入页面的完整网址对我来说解决了这个问题。

斯丁前端 2020.03.23

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

这将帮助您摆脱错误。

神乐 2020.03.23

造成此问题的主要原因之一是试图加载的CSS文件不是有效的CSS文件。

原因：

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

检查您要加载的文件是否为有效的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>`

JinJin 2020.03.23

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

伽罗卡卡西 2020.03.23

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

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

小小 2020.03.23

引导样式未加载＃3411

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

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

然后，将所需的脚本文件添加到apps[0].scriptsangular-cli.json文件中：

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

它为我工作。

乐米亚 2020.03.23

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

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

Express中的express.static内置中间件功能，以及.html文件中的功能：<link rel="stylesheet" href="style.css">

GO 2020.03.23

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

但是显然已经激活了一个严格的MIME类型检查，而且我不太确定它是在我这边还是在我所在的公司旁边。

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

番长 2020.03.23

我知道它可能没有上下文，但是链接不存在的文件可能会导致此问题，因为它以前发生在我身上。

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

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

小宇宙 2020.03.23

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

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

然后我改为

<base href="/">

然后工作正常。

Itachi 2020.03.23

您可以打开Google Chrome浏览器工具，选择“网络”标签，重新加载页面并找到CSS的文件请求，然后查找文件中包含的内容。

合并文件中的两个库时，包括某些字符或标头不适用于CSS时，也许您做错了什么？

樱古一 2020.03.23

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

给出以下简单的文件夹结构：

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

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

西里神奇 2020.03.23

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

这在网上很好用：

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

但是对于本地主机，我需要摆脱斜杠：

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

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

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

如果要拥有所有属性，以便在最严格的验证器和IDE上进行验证，则应提供media值，并且rel应该为stylesheet，例如：

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

DavaidTony宝儿 2020.03.23

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

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

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

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

达蒙 2020.03.23

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

卡卡西Near 2020.03.23

我只是在angular.json的Angular 6构建配置的样式部分中引用了CSS文件（在我的情况下为Angular主题）：

这不能回答问题，但是可能对我来说是一个合适的解决方法。

理查德神无飞云 2020.03.23

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

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

删除该库并将其放入供应商文件（总是缩小而没有注释）解决了该问题。

再次，我不是100％地确定这是修复程序，但是对我来说仍然是一个胜利，因为它现在可以按预期运行。

Itachi 2020.03.23

我在Bootstrap模板中遇到此错误。

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

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

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

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

乐米亚 2020.03.23

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

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

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

但是您的CSS文件已命名style.css（不包含第二个s），那么您很可能会看到此错误。

Stafan 2020.03.23

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

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

斯丁前端 2020.03.23

Make a folder just below/above the style.css file as per the Angular structure and provide a link like <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.