English 我正在使用一个网站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的东西（也许是设置吗？）？
当您将cli工具用于reactjs或angular时，会发生此问题，所以关键是要从这些工具复制整个最终版本，因为它们初始化它们是自己的精简服务器，这会使您的URL与创建的后端服务器混淆...拿走整个构建文件夹，并将其转储到后端服务器项目的资产文件夹中，并从后端服务器而不是Angular或Reactjs附带的服务器中引用它们，否则您将其用作特定平台的前端API服务器
我碰到了同样的问题，即向Azure B2C用户流添加自定义外观的问题。我发现的是html页所指的根是../ oauth / v2（即oauth服务器路径），而不是我的存储鲍勃的路径。
输入页面的完整网址对我来说解决了这个问题。
如果将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";
这将帮助您摆脱错误。
造成此问题的主要原因之一是试图加载的CSS文件不是有效的CSS文件。
原因：
检查您要加载的文件是否为有效的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。
如果浏览器找不到相关的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";
删除rel =“ stylesheet”并添加type =“ text / html”。所以看起来像这样-
<link href="styles.css" type="text/html" />
我安装了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服务
它为我工作。
对于Node.js应用程序，只需在服务器文件中导入所有必需的模块后使用它：
app.use(express.static("."));
link rel="stylesheet" href="style.css">就我而言，当我实时部署该程序包时，我将其从公共HTML文件夹中移出。这是有原因的。
但是显然已经激活了一个严格的MIME类型检查，而且我不太确定它是在我这边还是在我所在的公司旁边。
但是，一旦我将样式文件夹移到了与index.php文件相同的目录中，我就停止了该错误，并且样式被完美激活。
我知道它可能没有上下文，但是链接不存在的文件可能会导致此问题，因为它以前发生在我身上。
<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />
如果此文件不存在，您将面临该问题。
我遇到了同样的问题，然后检查并写道：
<base href="./"> 在index.html中
然后我改为
<base href="/">
然后工作正常。
您可以打开Google Chrome浏览器工具，选择“网络”标签，重新加载页面并找到CSS的文件请求，然后查找文件中包含的内容。
合并文件中的两个库时，包括某些字符或标头不适用于CSS时，也许您做错了什么？
除了一长串的答案外，这个问题也发生在我身上，因为从浏览器同步的角度来看，我没有意识到路径是错误的。
给出以下简单的文件夹结构：
package.json
app
|-index.html
|-styles
|-style.css
在href属性中<link>的index.html必须app/styles/style.css，而不是styles/style.css
当我将其移至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">
对于其他使用Angular-CLI并发布到Web服务器上的子文件夹的用户，请检查以下答案：
当您部署到域中的非根路径时，您需要手动更新<base href="/">您的代码dist/index.html.
在这种情况下，您将需要更新为 <base href="/sub-folder/">
如本文中提到的解决方案，某些解决方案对我有用，但是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.json的Angular 6构建配置的样式部分中引用了CSS文件（在我的情况下为Angular主题）：
这不能回答问题，但是可能对我来说是一个合适的解决方法。
我认为，问题出在以注释开头的CSS库。
在开发过程中，我不会缩小文件，也不会删除注释。这意味着样式表以一些注释开头，从而使其被视为与CSS不同。
删除该库并将其放入供应商文件（总是缩小而没有注释）解决了该问题。
再次，我不是100％地确定这是修复程序，但是对我来说仍然是一个胜利，因为它现在可以按预期运行。
我在Bootstrap模板中遇到此错误。
<link href="starter-template.css" rel="stylesheet">
然后，我rel="stylesheet"从链接中删除了，即：
<link href="starter-template.css">
而且一切正常。如果使用的是Bootstrap模板，请尝试此操作。
当您没有正确引用CSS文件时，也会出现此错误。
例如，如果您的链接标记是
<link rel="stylesheet" href="styles.css">
但是您的CSS文件已命名style.css（不包含第二个s），那么您很可能会看到此错误。
在大多数情况下，这可能仅仅是CSS文件路径错误。因此，Web服务器返回status: 404了一些类型的Not Found内容有效负载html。
浏览器遵循此<link rel="stylesheet" ...>标记的（错误）路径，以应用CSS样式。但是返回的内容类型矛盾，因此会记录错误。
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">.
仔细检查文件的名称和路径。就我而言，我在目标文件夹中有类似以下内容：
而这个链接：
我猜想浏览器试图加载JavaScript文件并抱怨它的MIME类型，而不是给我一个文件未找到错误。