由于MIME类型未加载样式表

我正在使用一个网站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的东西（也许是设置吗？）？

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

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

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

href="/css/style.css">

如果确实包含正斜杠（/public/），则可以这样做href="css/style.css"。

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

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

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

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

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

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

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

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

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

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

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

我对于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">

有效。我不知道为什么，但是它做到了。

您文件中的评论将对此起到作用。一些缩小器不会删除评论。

也

如果您使用Node.js并使用以下方式设置静态文件express：

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

您需要正确处理文件。

就我而言，这都是问题所在，因此我在CSS链接前面加上了“ /css/styles.css”。

例：

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

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

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

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

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

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

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

在这种情况下，您需要更新为 <base href="https://stackoverflow.com/sub-folder/">

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

当我将其移至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">

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

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

所以简单的解决方案是删除，.因为我的是单页应用程序。

像这样：

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

所以它总是解决 /index.css

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

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

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

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

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

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

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

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

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

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

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

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

如果您在没有JS的情况下使用Express，请尝试：

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

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

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

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

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

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

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

然后我改为

<base href="/">

然后工作正常。

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

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

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

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

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

Bootstrap样式未加载＃3411

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

1. 我安装了Bootstrap 3.3.7版

   npm install bootstrap --save

2. 然后，将所需的脚本文件添加到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"
   ],

3. 我重新开始ng服务

它为我工作。

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

造成此问题的主要原因之一是试图加载的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>`

有关更多信息itemProperty，请访问/webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document。

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

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

这将帮助您摆脱错误。

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

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

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

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

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

如果您使用的是Express，则以下内容应会有所帮助：

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

模块称为：express-static-gzip

我的设置是：

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