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的东西（也许是设置吗？）？
#1 楼
对于Node.js应用程序，请检查您的配置：app.use(express.static(__dirname + '/public'));
请注意，
/public末尾没有正斜杠，因此您需要将其包括在href中HTML的选项：href="/css/style.css">
如果确实包含正斜杠（
/public/），则只需执行href="css/style.css"即可。评论
在我看来，href =“ / assets / style.css”>解决了该问题！
–塞尔吉奥·古吉克（Sergio Guerjik）
3月1日13:51
#2 楼
我认为，问题在于CSS库以注释开头。在开发中，我不会缩小文件，也不会删除注释。这意味着样式表以一些注释开头，从而使样式表看起来与CSS有所不同。
删除库并将其放入供应商文件中（总是最小化而没有注释）解决了该问题。 。
再次，我不是100％肯定这是修复程序，但是对我来说仍然是一个胜利，因为它现在可以按预期运行。
评论
修正了一半，因为如果您不想将所有这些CSS放到供应商中，该怎么办？每次测试应用程序时最小化node_modules？ h ...您找到了可以编译某个模块的东西吗？
– SteamFire
18-3-23在14:01
在我的编译过程中，仅在构建时创建供应商文件，然后我只是观察我实际使用的文件的更改（通常没有任何内容可用于供应商）。这意味着第一代构建的速度要慢一些，但随后我只是在不缩小的情况下编译文件，这对我来说并不会减慢速度
–尼克
18年3月24日在9:50
我遇到了同样的问题，发现我试图将服务器上存在的文件的缩小版本作为非缩小文件加载。因此，当服务器上的文件为“ custom-style.css”时，我试图加载“ custom-style.min.css”。更改链接以加载正确的资源后，一切正常。
–程序员Dan
18年5月8日在15:35
问题不仅限于CSS。我还在JS文件上看到404，这是第一行中的注释引起的。
–黑色
2月28日10:00
#3 楼
如果您未正确引用CSS文件，也会出现此错误。例如，如果您的链接标记为<link rel="stylesheet" href="styles.css">
但是您的CSS文件名为
style.css（不带第二个s），那么您很可能会看到此错误。评论
确实发生在我身上。我在这里尝试了所有答案（更改mimetype，删除CSS注释，更改node.js配置...）。我要做的就是修复CSS名称中的拼写错误。 h！
– AJPerez
18年5月23日在10:54
要添加到此答案，请确保gulp实际上找到了css文件并将其通过管道传输到dist中。每当出现此错误时，这是因为我以某种方式弄乱了指向css文件的路径，而该路径在build目录中根本不存在。
– LAdams87
18年6月25日在19:37
是的，对我来说，也是一个简单而愚蠢的错字。我认为服务器发送404响应页面是怎么做的，所以您的浏览器会得到该404页面，并告诉您这是不正确的CSS，这是真的。
–塔努
18-10-17在6:53
#4 楼
在大多数情况下，这可能只是CSS文件路径错误。因此，Web服务器返回带有某些status: 404类型的Not Found内容有效载荷的html。浏览器遵循
<link rel="stylesheet" ...>标记的此（错误）路径，旨在应用CSS样式。但是返回的内容类型相互矛盾，因此会记录错误。
评论
我的问题是路径无效。但是，此错误的路径是由我为角度项目设置的基本href错误导致的。如果其他人在更新您的基本href后开始看到此错误，则可能是原因。
– Krejko
18/12/14在18:34
感谢您解决麻烦，以完整清楚地记录CSS文件中的404错误如何产生此（最初）令人费解的错误消息
– Velojet
19年1月15日，1：11
另一种解决方法，将收到此错误的网址粘贴到另一个选项卡中，如果您没有看到CSS，则可能是问题所在
– BlackICE
19年12月11日在16:20
比你的提示
–周杰森
3月14日7:10
#5 楼
根据Angular结构，在style.css文件的下方/上方创建一个文件夹，并提供类似<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">的链接。
评论
为什么这样做？该错误指出“ text / html”不是受支持的MIME类型。
–詹姆斯·贝特森（James Bateson）
18 Mar 27 '18 at 11:15
就我而言，错误消失了，但是css样式没有应用..：/
–安德鲁
18年4月19日在14:35
我确实花了更多时间阅读有关此问题的信息，并将ibss文件的类型更改为ibto可能会导致严重的问题，例如服务器将css读取为html。
–尼克
18年4月20日在4:42
在AngularDart中，index.html的根目录是“ web”文件夹，而不是项目主文件夹。因此，所有CSS文件都必须位于Web文件夹内。像这样“ [projectfolder] \ web [yourcssfileshere]”。因此，如果您尝试导入位于Web文件夹外部的css文件，则将找不到该文件。
– Wael
19-09-2在12:17
#6 楼
我在Bootstrap模板中遇到此错误。<link href="starter-template.css" rel="stylesheet">
然后我从链接中删除了
rel="stylesheet"，即：<link href="starter-template.css">
一切正常。如果使用的是Bootstrap模板，请尝试此操作。
评论
接得好。错误现在消失了。
–丰富
18年7月29日在4:22
根据生活标准（4.2.4），“链接元素必须具有rel属性或itemprop属性，但不能同时具有两者。”因此，删除rel属性只会删除包含样式表的功能。
– Artjom B.
18-10-17在20:32
#7 楼
我已经更改了'href'->'src'。因此，从此：<link rel="stylesheet" href="dist/photoswipe.css"> 到此：
<link rel="stylesheet" src="dist/photoswipe.css"> 它起作用了。我不知道为什么，但是它确实起作用了。
评论
尽管它也对我有用，但这是有效的属性吗？
–sr9yar
18-10-31在13:42
@ sr9yar您是正确的，根据validator.w3.org，在链接中包含src是无效的，因此它是一个快速修复程序，但它很不错，但是如果您有更多时间，我建议您再找一个有效的解决方法。
–塞巴斯蒂安·沃拉奇（SebastianVoráč）
18年11月13日在18:59
#8 楼
您文件中的评论将对此起到作用。某些压缩程序不会删除注释。ALSO
如果使用Node.js并使用
express设置静态文件，例如：app.use(express.static(__dirname + '/public'));
您需要正确处理文件。
在我看来，这都是问题所在，因此我在CSS链接前面加上了“ /css/styles.css”。
示例：
<link type="text/css" rel="stylesheet" href='/css/styles.css">
此解决方案非常完美，因为路径是CSS无法渲染的主要问题
#9 楼
我只是在angular.json的Angular 6构建配置的样式部分中引用了CSS文件（在我的情况下为Angular主题）：
这个问题，但这对我来说可能是一个合适的解决方法。
评论
这是Angular-CLI 6项目的正确答案
–托斯滕·巴瑟尔
18年8月7日在13:30
#10 楼
我知道它可能不在上下文中，但是链接不存在的文件可能会导致此问题，就像以前发生在我身上一样。<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />
如果此文件不存在，您将面对那个问题。
#11 楼
如本文中提到的解决方案，某些解决方案对我有用，但是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" >
评论
很棒（Y）解决了我的问题
– Chakri
18年11月16日在8:28
#12 楼
对于其他使用Angular-CLI并发布到Web服务器上的子文件夹的用户，请检查以下答案：当您部署到域中的非根路径时，您需要在您的
<base href="/">中手动更新dist/index.html.标签在这种情况下，您将需要更新到
<base href="/sub-folder/"> https://github.com/angular/angular-cli/issues / 1080
#13 楼
当我将其移至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">
#14 楼
我的问题是我正在使用webpack，并且在我的HTML CSS链接中有一个相对路径，并且任何时候只要导航到嵌套页面，该页面都会解析为错误的路径：<link rel="stylesheet" href='./index.css'>
，因为我的是单页应用程序，所以简单的解决方案是删除
.。像这样：
<link rel="stylesheet" href='/index.css'>
所以它总是解析为
/index.css 评论
是的，就我而言，我忘记从index.html文件中删除这些相对路径，并且在生产模式下运行webpack。由于Webpack通过webpack.prod.js动态链接CSS文件，因此不需要这些路径。
– Kewal Shah
5月4日12:50
#15 楼
我遇到了同样的问题，然后检查是否写了以下内容：q.4312079q在index.html中
然后我更改为
<base href="/">
然后工作正常。
#16 楼
我遇到了同样的问题。如果您的项目的结构像以下树一样：
server.js中的代码：index.html
assets
|-styles
|-custom-style.css
server
|- server.js
注意：Path是内置的Node.js模块，因此不需要通过npm安装此软件包。 >
#17 楼
除了一长串的答案外，这个问题也发生在我身上，因为从浏览器同步的角度来看，我没有意识到路径错误。给出以下简单的文件夹结构：
package.json
app
|-index.html
|-styles
|-style.css
href中<link>内部的index.html属性必须是app/styles/style.css而不是styles/style.css 评论
确实，路径上的错字也给了我同样的错误。
–朱丽莎（Julesezaar）
19年4月23日在8:42
哇，这对我有用，非常感谢。我真的要放弃
– Vash
19-10-26在4:23
#18 楼
您可以打开Google Chrome浏览器工具，选择“网络”标签，重新加载页面并找到CSS的文件请求，然后查找文件中包含的内容。合并时可能做错了文件中的两个库，包括一些CSS不能正确使用的字符或标头？
评论
不幸的是，我确实尝试过，但是并没有真正的帮助，请求立即失败，并且只有请求网址（正确）
–尼克
18年1月14日在11:02
#19 楼
如果您在没有JS的情况下使用Express，请尝试：app.use(express.static('public'));
例如，我的CSS文件位于
public/stylesheets/app.css #20 楼
通过进入我的浏览器控制台>网络> 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链接指向的位置。
#21 楼
对于Node.js应用程序，只需在服务器文件中导入所有必需的模块后使用此功能：app.use(express.static("."));
express.static内置中间件功能在Express中，并且在您的.html文件中：<
link rel="stylesheet" href="style.css"> 评论
您真的不想向公众提供服务器代码吗？
– KiJéy
18年8月10日在12:16
#22 楼
删除rel =“ stylesheet”并添加type =“ text / html”。所以看起来像这样-<link href="styles.css" type="text/html" />
#23 楼
就我而言，当我实时部署该程序包时，我将其从公共HTML文件夹中移出。这是有原因的。但是显然已经激活了严格的MIME类型检查，而且我不太确定它是在我这边还是与我所在的公司一起。
但是，一旦我将样式文件夹移到与index.php文件相同的目录中，我就停止了该错误，并且样式被完美激活。
#24 楼
Bootstrap样式无法加载＃3411https://github.com/angular/angular-cli/issues/3411
我安装了Bootstrap v。3.3.7
npm install bootstrap --save
然后我将所需的脚本文件添加到
apps[0].scripts的angular-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 serve
它对我有用。
#25 楼
如果浏览器找不到相关的css文件，则可能会出现此错误。如果您使用Angular应用程序，则不必将css文件路径放在index.html上。
<link href="xxx.css" rel="stylesheet"> -->
您可以在styles.css文件中放置相关的css文件路径。
@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
评论
这是我的解决办法，从index.html删除链接href，并在styles.scss中使用import方法。
– IronWorkshop
19年11月15日在3:49
#26 楼
我正在使用React.js应用程序，并且也遇到了导致我在这里出现的错误。这就是帮助我的原因。我没有在<link>中添加index.html，而是在需要使用此样式表的组件中添加了import：import 'path/to/stylesheet.css';
#27 楼
除了使用：<base href="/">
还从您的CSS链接中删除
rel="stylesheet"零件：<link type="text/css" href="assets/styles/custom-style.css"/>
#28 楼
造成此问题的主要原因之一是尝试加载的CSS文件不是有效的CSS文件。原因：
无效的MIME类型
样式表中包含JavaScript代码-（可能由于不正确的Webpack捆绑程序配置而发生）
检查要加载的文件是否为有效的CSS样式表（获取服务器URL网络标签中的文件，然后点击新标签并进行验证）。
在body标签内使用时需要考虑的有用信息。
体内的
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 。#29 楼
如果将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";
它将帮助您摆脱错误。
#30 楼
这是特定于Typescript + Express我ctrl + f的“ Typescript”和“ .ts”，但在这些答案中均未找到任何内容，因此，我将在此处添加解决方案，因为它是由（ ）打字稿，而我读过的解决方案并未明确解决此特定问题。
问题是打字稿正在将我的
app.ts文件编译到项目的dist目录dist/app.js中的javascript文件中，这是我的目录结构，看看是否可以发现问题：├── 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，如果Node实际上正在运行，这将是有效路径打字稿。但是Node运行的是位于app.js目录中的已编译JavaScript dist。因此，我通过将app.use(e.static(path.join(__dirname, "/public")));
更改为
app.use(e.static(path.join(__dirname, "../public")));
解决了
app.ts中的问题
评论
当链接的样式表以html当您为文件设置了错误的URL或服务器配置不正确时，就会发生这种情况。结果，浏览器无法获取样式表，但是会获取一些带有404状态和“ Content-Type”标头的HTML。由于浏览器从服务器获取了某些内容，因此它不会告诉您没有答复，但会告诉您文件的MIME类型不正确。最快的检查方法是尝试在新选项卡中直接直接打开文件http：// localhost：3000 / assets / styles / custom-style.css。
对我来说，就是RussCoder所描述的情况。这背后的原因是我使用了Angular并忘记了将css文件添加到angular.json中的样式包装中。因此在构建应用程序时被忽略。
我可以通过Spring安全配置解决此问题。它阻止了对资源文件夹的访问。
错误的proxy.conf.json设置导致我们遇到了这个奇怪的错误，因为转发到后端API的请求无法正常工作，因此出现了HTML错误响应。