由于 MIME 类型而未加载样式表
Posted
技术标签:
【中文标题】由于 MIME 类型而未加载样式表【英文标题】:Stylesheet not loaded because of MIME-type 【发布时间】:2021-04-03 01:15:34 【问题描述】:我正在开发一个使用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 的东西(可能是设置?)?
【问题讨论】:
当我的链接样式表以 htmlhttp://localhost:3000/assets/styles/custom-style.css
。
对我来说就是 RussCoder 描述的情况。这背后的原因是我使用了 Angular 并忘记在 angular.json 中的样式包装中添加一个 css 文件。所以在构建应用程序时它被忽略了。
我可以通过 spring 安全配置来解决这个问题。它阻止了对资源文件夹的访问。
错误的proxy.conf.json
设置导致我们出现这个奇怪的错误,因为转发到后端 API 的请求无法正常工作,因此 HTML 错误响应。
【参考方案1】:
对于 Node.js 应用程序,请检查您的配置:
app.use(express.static(__dirname + '/public'));
请注意,/public
末尾没有正斜杠,因此您需要将其包含在 HTML 的 href 选项中:
href="/css/style.css">
如果您确实包含正斜杠 (/public/
),那么您可以直接使用 href="css/style.css"
。
【讨论】:
href="/assets/style.css"> 在我的情况下解决了这个问题! 没有“/”我可以在带有 url 的页面中加载 css;本地主机:3000/api/用户。但是当我有一个添加变量的链接(.../users?id=5397538945734)时,它会给出错误。当我在 css 链接中添加斜杠时,它可以工作。多么奇怪!?【参考方案2】:我认为问题在于以 cmets 开头的 CSS 库。
在开发过程中,我不会缩小文件,也不会删除 cmets。这意味着样式表以一些 cmets 开头,导致它被视为与 CSS 不同的东西。
删除库并将其放入供应商文件(始终在没有 cmets 的情况下缩小)解决了该问题。
同样,我不能 100% 确定这是一个修复,但它仍然是我的胜利,因为它现在按预期工作。
【讨论】:
解决了一半,因为如果您不想将所有这些 css 放在 vendor 中,您应该怎么做?每次测试应用程序时都最小化 node_modules?呵呵……你有没有找到一些东西来编译某个模块? 在我的编译过程中,供应商文件仅在构建时创建,然后我只关注我实际正在处理的文件的更改(通常不会进入供应商)。这意味着第一次构建有点慢,但是我只是编译我的文件而不进行缩小,这不会减慢我的进程 我遇到了同样的问题,发现我试图将服务器上存在的文件的缩小版本作为非缩小文件加载。所以,当服务器上的文件是“custom-style.css”时,我试图加载“custom-style.min.css”。更改链接以加载正确的资源后,一切正常。 问题不仅限于 CSS。我还在一个 JS 文件上得到了 404,这是由第一行中的注释引起的。 我的情况没有出现错误。这对我有用。谢谢。【参考方案3】:当您没有正确引用您的 CSS 文件时,也会出现此错误。
例如,如果你的链接标签是
<link rel="stylesheet" href="styles.css">
但您的 CSS 文件名为 style.css
(没有第二个 s),那么您很有可能会看到此错误。
【讨论】:
正是发生在我身上的事情。我在这里尝试了每个答案(更改 mimetype,删除 CSS cmets,更改 node.js 配置......)。我所要做的就是修正 CSS 名称中的一个错字。哇! 要添加到这个答案,请确保 gulp 确实找到了 css 文件并将其通过管道传输到您的 dist。每当我收到此错误时,都是因为我以某种方式搞砸了 css 文件的路径,它只是在构建目录中不存在。 是的,对我来说也是一样,一个简单而愚蠢的错字。我认为服务器发送一个 404 响应页面是做什么的,所以你的浏览器得到那个 404 页面并告诉你它不是正确的 css ......这是真的。 FWIW,当 Sharepoint 权限导致访问被拒绝时,我也遇到了同样的问题。我必须将经过身份验证的用户添加到 SP 站点。一如既往,感谢 Stack Overflow 社区为我指明了正确的方向。干杯! ? 就我而言,我没有将 style.css 上传到服务器。呵呵..【参考方案4】:在大多数情况下,这可能只是 CSS 文件路径错误。所以 Web 服务器返回 status: 404
和一些 Not Found
内容负载 html
类型。
浏览器从<link rel="stylesheet" ...>
标记遵循这条(错误的)路径,目的是应用CSS 样式。但是返回的内容类型矛盾,因此会记录错误。
【讨论】:
我的问题是路径无效。但是,这个糟糕的路径是由于我的 Angular 项目的基本 href 设置不正确造成的。如果其他人在更新您的基本 href 后开始看到此错误,则可能是原因。 感谢您不厌其烦地完整清楚地记录 CSS 文件上的 404 错误如何产生这个(最初)令人费解的错误消息 另一种故障排除方法,将出现此错误的网址粘贴到另一个选项卡中,如果您没有看到 CSS,则可能是问题【参考方案5】:Bootstrap 模板出现此错误。
<link href="starter-template.css" rel="stylesheet">
然后我从链接中删除了rel="stylesheet"
,即:
<link href="starter-template.css">
一切正常。如果您使用的是 Bootstrap 模板,请尝试此操作。
【讨论】:
根据Living Standard (4.2.4),“链接元素必须具有rel 属性或itemprop 属性,但不能同时具有两者。” 因此,删除rel
属性只是删除了包含样式表的功能。【参考方案6】:
我已将我的href
更改为src
。所以从这里:
<link rel="stylesheet" href="dist/photoswipe.css">
到这里:
<link rel="stylesheet" src="dist/photoswipe.css">
成功了。我不知道为什么,但它确实起到了作用。
【讨论】:
虽然它也对我有用,但这是一个有效的属性吗? @sr9yar 你是对的,根据validator.w3.org,在链接中包含 src 是无效的,所以它作为一个快速修复程序很好,但只要你有更多的时间,我建议找到另一个更有效的解决方法。【参考方案7】:根据 Angular 结构在 style.css 文件的下方/上方创建一个文件夹,并提供类似 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
的链接。
【讨论】:
为什么会这样?错误指出“text/html”不是受支持的 MIME 类型。 在我的情况下,错误消失了,但是没有应用 css 样式.. :/ 我确实花了更多时间阅读有关此问题的信息,并将 css 文件的类型更改为其他可能会导致严重问题,例如 css 被服务器读取为 html 在 AngularDart 中,index.html 的根目录是“web”文件夹,而不是项目主文件夹。所以所有的 css 文件都必须在 web 文件夹中。像这样“[projectfolder]\web[yourcssfileshere]”。因此,如果您尝试导入位于 web 文件夹之外的 css 文件,它将找不到。【参考方案8】:您文件中的评论会导致此问题。 一些缩小器不会删除 cmets。
也
如果您使用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】:除了使用:
<base href="/">
从您的 css 链接中删除 rel="stylesheet"
部分:
<link type="text/css" href="assets/styles/custom-style.css"/>
【讨论】:
删除rel
修复了它,但问题是为什么?
它消除了错误,但它不应用样式表
删除属性 rel 对我有用。我正在使用 Angular。【参考方案10】:
我只是在 angular.json 的 Angular 6 构建配置的 styles 部分中引用了 CSS 文件(在我的例子中是一个 Angular 主题):
这并不能回答问题,但它可能是一个合适的解决方法,就像对我一样。
【讨论】:
这是 Angular-CLI 6 项目的正确答案【参考方案11】:我知道这可能与上下文无关,但链接一个不存在的文件可能会导致这个问题,就像我之前发生的那样。
<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />
如果此文件不存在,您将面临该问题。
【讨论】:
当然,如果文件不在所需的目录或命名不同,那么你就会导致这个问题【参考方案12】:正如本文中提到的解决方案,一些解决方案对我有用,但 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" >
【讨论】:
【参考方案13】:对于使用 Angular-CLI 并发布到网络服务器上的子文件夹的其他人,请查看以下答案:
当您部署到域中的非根路径时,您需要手动更新 dist/index.html.
中的 <base href="/">
标记
在这种情况下,您需要更新到<base href="/sub-folder/">
https://github.com/angular/angular-cli/issues/1080
【讨论】:
【参考方案14】:问题是,如果你有一个相对路径,并且你导航到一个嵌套页面,那将解析到错误的路径:
<link rel="stylesheet" href='./index.css'>
所以简单的解决方案是删除.
,因为我的是single-page application。
像这样:
<link rel="stylesheet" href='/index.css'>
所以它总是解析为/index.css
这个问题有很多答案,但似乎没有一个真正有效。如果您删除 rel="stylesheet"
,它将停止错误但不会应用样式表。
真正的解决方案:
只需删除 .
就可以了
【讨论】:
是的,就我而言,我忘记从我的 index.html 文件中删除这些相对路径,并且在生产模式下运行 webpack。不需要这些路径,因为 webpack 通过 webpack.prod.js 动态链接 css 文件。【参考方案15】:当我将一个网站移动到 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">
【讨论】:
【参考方案16】:我遇到了同样的问题,然后我检查了我写的:
<base href="./">
in index.html
然后我改成
<base href="/">
然后它运行良好。
【讨论】:
【参考方案17】:我也遇到了同样的问题。
如果你的项目结构如下树:
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 安装这个包。
【讨论】:
【参考方案18】:您可以打开谷歌浏览器工具,选择网络选项卡,重新加载您的页面并找到 CSS 的文件请求并查找文件中的内容。
您在合并文件中的两个库时可能做错了什么,包括一些不适合 CSS 的字符或标题?
【讨论】:
不幸的是,我确实尝试过,但它并没有真正的帮助,请求立即失败,它只有请求 url(这是正确的)【参考方案19】:除了一长串答案之外,这个问题也发生在我身上,因为从浏览器同步的角度来看,我没有意识到路径是错误的。
鉴于这个简单的文件夹结构:
package.json
app
|-index.html
|-styles
|-style.css
index.html
中 <link>
内的 href
属性必须是 app/styles/style.css
而不是 styles/style.css
【讨论】:
确实,只是路径中的一个错字给了我同样的错误。 哇,这对我有用,非常感谢。我真的要放弃了【参考方案20】:如果您使用没有 JS 的 Express,请尝试:
app.use(express.static('public'));
例如,我的 CSS 文件位于 public/stylesheets/app.css
【讨论】:
【参考方案21】:我是如何解决这个问题的。
对于 Node.js 应用程序,您需要设置 **public**
文件夹配置。
// Express js
app.use(express.static(__dirname + '/public'));
否则,你需要像href="public/css/style.css".
那样做
<link href="public/assets/css/custom.css">
<script src="public/assets/js/scripts.js"></script>
注意:它适用于
http://localhost:3000/public/assets/css/custom.css
。但构建后无法工作。您需要为 Express 设置app.use(express.static(__dirname + '/public'));
【讨论】:
【参考方案22】:对于 Node.js 应用程序,只需在服务器文件中导入所有必需的模块后使用它:
app.use(express.static("."));
express.static 内置中间件函数,在你的 .html 文件中:link rel="stylesheet" href="style.css">
【讨论】:
您真的不想向公众提供服务器代码吗?【参考方案23】:通过进入我的浏览器控制台 > 网络 > 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 链接指向的位置。
【讨论】:
【参考方案24】:我正在使用React.js
应用程序,也遇到了这个错误,导致我来到这里。这对我有帮助。我没有将<link>
添加到index.html
,而是在我需要使用此样式表的组件中添加了import
:
import 'path/to/stylesheet.css';
【讨论】:
【参考方案25】:这是 Typescript+Express 特有的
我 ctrl+f'd "Typescript" 和 ".ts" 并在这些答案中一无所获,所以我将在这里添加我的解决方案,因为它是由(我对 typescript 的经验不足)引起的,而我的解决方案是已阅读未明确解决此特定问题。
问题是 Typescript 正在将我的 app.ts
文件编译成我项目的 dist
目录中的 javascript 文件 dist/app.js
这是我的目录结构,看看你能不能发现问题:
├── 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 实际上正在运行 Typescript,这将是一个有效路径。但是 Node 正在运行编译后的 javascript,app.js
,它位于 dist
目录中。
所以app.ts
假装 dist/app.js
解决了我的问题。因此,我通过更改解决了app.ts
中的问题
app.use(e.static(path.join(__dirname, "/public")));
到
app.use(e.static(path.join(__dirname, "../public")));
【讨论】:
【参考方案26】:删除 rel="stylesheet" 并添加 type="text/html"。所以它看起来像这样 -
<link href="styles.css" type="text/html" />
【讨论】:
【参考方案27】:在我的情况下,当我实时部署包时,我将它从公共 HTML 文件夹中取出。这是有原因的。
但显然已经激活了严格的 MIME 类型检查,我不太确定它是在我身边还是在我托管的公司。
但是,当我将样式文件夹移动到与 index.php 文件相同的目录中时,我就停止了错误,并且样式被完美地激活了。
【讨论】:
【参考方案28】:如果您将 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";
它将帮助您摆脱错误。
【讨论】:
【参考方案29】:引导样式未加载 #3411
https://github.com/angular/angular-cli/issues/3411
我安装了 Bootstrap v. 3.3.7
npm install bootstrap --save
然后我将需要的脚本文件添加到 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"
],
我重新启动了 ng serve
它对我有用。
【讨论】:
【参考方案30】:如果浏览器找不到相关的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";
【讨论】:
这对我来说是修复,从 index.html 中删除链接 href 并使用 styles.scss 中的导入方法。以上是关于由于 MIME 类型而未加载样式表的主要内容,如果未能解决你的问题,请参考以下文章
“样式表未加载,因为它的 MIME 类型“text/html”不是“text/css”[关闭]
Spring MVC:样式表未加载,因为它的 MIME 类型“text/html”不是“text/css”
Wordpress 资源解释为样式表,但使用 mime 类型 text/html 传输
CSS、.htaccess、资源解释为样式表,但使用 MIME 类型 text/html 传输