由于MIME类型，样式表未加载

我正在开发一个使用Gulp.js编译和浏览器同步的网站，以保持浏览器与我的更改同步。

Gulp.js任务正确编译了所有内容，但在网站上，我看不到任何样式，控制台显示此错误消息：

拒绝应用样式 http://localhost:3000/assets/styles/custom-style.css因为它 MIME类型（'text/html'）不是受支持的样式表MIME类型，并且 启用严格的MIME检查。

现在，我真的不明白为什么会发生这种情况。

超文本标记语言包括这样的文件（我很确定是正确的）：

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

样式表现在是Bootstrap和字体很棒样式之间的合并（还没有自定义）。

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

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

但我一直在犯错误。

可能是什么？这是什么（也许是一个设置？）也许是吞咽/浏览同步？

1673079 次浏览
小开

您可以打开GoogleChrome工具，选择网络选项卡，重新加载页面并找到CSS的文件请求并查找文件中的内容。

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

小开
最佳答案

我认为，问题是CSS库以注释开头。

在开发过程中，我不会缩小文件，也不会删除注释。这意味着样式表以一些注释开头，导致它被视为与CSS不同的东西。

删除库并将其放入供应商文件（总是在没有注释的情况下缩小）解决了这个问题。

再一次，我不是100%确定这是一个修复，但它仍然是我的胜利，因为它现在按预期工作。

小开

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

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

请注意，/public末尾没有正斜杠，因此您需要将其包含在超文本标记语言的href选项中：

href="/css/style.css">

如果您确实包含正斜杠（/public/），那么您可以执行href="css/style.css"。

小开

问题是，如果您有一个相对路径，并且您导航到嵌套页面，则会解析为错误的路径：

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

因此，简单的解决方案是删除.，因为我的是单页应用。

像这样：

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

所以它总是解析为/index.css

这个问题有很多答案，但似乎没有一个真正有效。如果您删除rel="stylesheet"，它将停止错误，但不会应用样式表。

真正的解决方案：

只需删除.。它就可以工作了。

小开

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

app.use(express.static("."));
  • 在Express中express.static内置的中间件函数，在您的. html文件中：<link rel="stylesheet" href="style.css">
小开

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

在此输入图片描述

小开

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

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

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

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

小开

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

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

然后我改成了

<base href="/">

然后它工作得很好。

小开

您文件中的注释会跳闸。一些小型程序不会删除注释。

还

如果您使用Node.js并使用express设置静态文件，例如：

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

您需要正确处理文件。

在我的情况下，两者都是问题，所以我用“/css/styles.css”作为CSS链接的前缀。

示例：

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

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

小开

在我的例子中，当我实时部署包时，我将它从公共超文本标记语言文件夹中取出。这是有原因的。

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

但是，一旦我将样式文件夹移动到与index.php文件相同的目录中，我就不再收到错误，样式被完美激活。

小开

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

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

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

但是您的CSS文件名为style.css（没有第二个s），那么您很有可能会看到此错误。

小开

三重检查文件的名称和路径。在我的情况下，我在目标文件夹中有类似的内容：

lib
foobar.bundle.js
foobr.css

这个链接：

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

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

小开

我遇到了同样的问题，经过几个小时的调试，我发现它与无法写入的临时文件有关。

转到管理员→配置→文件系统。设置正确的临时目录。确保您的服务器有权写入该目录。

小开

我在Angular中遇到了这个错误。我解决这个问题的方法是在我的链接元素上放置一个ngif，所以直到我的动态URL填充后它才出现在DOM中。

这可能与这个问题有点无关，但我最终在这里寻找答案。

<link *ngIf="cssUrl" rel="stylesheet" type="text/css" [href]="sanitizer.bypassSecurityTrustResourceUrl(cssUrl)">
小开

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

原因：

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

检查您尝试加载的文件是否为有效的CSS样式表（从网络选项卡获取文件的服务器URL并在新选项卡中点击并验证）。

在body标签中使用时需要考虑的有用信息。

虽然在主体内有一个link标记不是使用标签的标准方式。但是我们可以将其用于页面优化（更多信息：优化CSS交付）/如果业务用例需要（当你提供内容的主体，服务器配置为必须呈现提供内容的超文本标记语言页面时）。

在保留body标签的同时，我们必须在link标签中添加属性itemProperty，例如

<body>
<!-- … -->
<link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
<!-- … -->
</body>

有关itemProperty的更多信息，请查看我可以在超文本标记语言文档的正文中使用标记吗？。

小开

我只是在angular.json的Angular 6构建配置的风格部分引用了CSS文件（在我的案例中是Angular主题）：

在此处输入图片描述

这并没有回答这个问题，但它可能是一个合适的解决方案，因为它对我来说。

小开

我遇到了这个问题。

我拒绝应用'http://m.b2b-v2-pre1.jcloudec.com/mobile-dynamic-load-component-view/resource/js/resource/js/need/layer.css?2.0'中的样式，因为它的MIME类型（'text/html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

改变路径可以解决这个问题。

小开

我有一个Bootstrap模板这个错误。

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

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

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

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

小开

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

它将帮助您摆脱错误。

小开

我也遇到过同样的问题。

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

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安装这个包。

小开

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

浏览器遵循<link rel="stylesheet" ...>标签的此（错误）路径，意图应用CSS样式。但是返回的内容类型相互矛盾，因此它记录了一个错误。

在此处输入图片描述

小开

我也遇到了同样的问题，在我的情况下，这是由于我手动尝试在超文本标记语言文件中导入CSS文件（就像我们总是对静态网站所做的那样），而实际上这些文件必须导入Webpack使用的切入点JavaScript文件。

当样式表被导入到主JavaScript文件中，而不是用超文本标记语言手动编写时，一切都按预期工作。

小开

我已将我的href更改为src。因此：

<link rel="stylesheet" href="dist/photoswipe.css">

对此：

<link rel="stylesheet" src="dist/photoswipe.css">

它奏效了。我不知道为什么，但它奏效了。

小开

这个线程的解决方案解决了我的问题：

不确定这是否对任何人都有帮助，但如果您使用的是angle-cli，我通过从我的index.html中删除CSS引用并将其添加到“样式”部分下的angular-cli.json文件来修复它。 重新启动我的网络服务器后，我不再有这个问题。

小开

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

给定这个简单的文件夹结构：

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

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

小开

重置. ts文件（强制Ionic重建）为我解决了这个问题。

这真的没有意义……但只要它有效，我是谁来判断？

在这里我看到了这个解决方法： Ionic和Angular 2-拒绝应用'http://localhost:8100/build/main.css'的样式；因为它的MIME类型（'text/html'）不受支持

小开

正如本文中提到的解决方案，其中一些解决方案对我有效，但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" >
小开

删除rel="style lesheet"并添加type="text/html"。所以它看起来像这样-

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

引导样式未加载#3411

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

  1. 我安装了Bootstrap v.3.3.7

    npm install bootstrap --save

  2. Then I added the needed script files to apps[0].scripts in the angular-cli.json file:

    "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. I restarted ng serve

It worked for me.

小开

我试图重新启动我的Windows机器并重新安装了“npm i”。

它为我工作。

小开

当我将其移动到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">
小开

当您使用反应或Angular的命令行工具时，会发生此问题，因此关键是从这些工具复制整个最终构建，因为它们初始化了自己的轻服务器，这会将您的URL与您创建的后端服务器混淆。

获取整个构建文件夹并将其转储到后端服务器项目的资产文件夹中，并从后端服务器而不是Angular或React附带的服务器引用它们。否则，您将其用作某个API服务器的前端。

小开

也许您对Buddy有授权问题：

试试这些步骤：

  1. 转到ISS→找到列出的项目→单击它→在操作下的右窗格中单击编辑权限
  2. 您将看到您的项目属性向导。单击证券
  3. 在组或用户名下→如果您看到“身份验证用户”，则您已获得授权，如果没有，则必须这样做。
  4. 添加后（您自己或在公司工作的管理员的帮助下：）），网站将开始加载资源。您可能需要在ISS下重新启动您的项目。
小开

我遇到了这个问题，在为AzureB2C用户流添加自定义外观时遇到了同样的问题。我发现超文本标记语言页面引用的根是…/oauth/v2（即OAuth服务器路径），而不是我的存储鲍勃的路径。

使用页面的完整URL为我解决了问题。

小开

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

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

如果您使用的是Express.js，那么以下内容应该会有所帮助：

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

模块名称：Express静态gzip格式

我的设置是：

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

如果您使用没有任何JavaScript代码的Express.js，请尝试：

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

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

小开

此错误的另一个原因可能是CSS文件权限不正确。在我的情况下，该文件无法访问，因为所有权已更改为root用户-这是由于将Git文件作为root用户推送而发生的。

小开

在我的例子中，它是由Grunt运行的任务的执行顺序。

它正在执行connect任务，该任务设置本地服务器并在执行转译样式的less和postcss之前自动在新选项卡中打开应用程序。

基本上，我改变了这个：

grunt.registerTask('default', 'Start server. Process styles.', ['connect', 'less', 'postcss']);

对此：

grunt.registerTask('default', 'Process styles. Start server.', ['less', 'postcss', 'connect']);

它奏效了！

小开

如果浏览器找不到相关的CSS文件，则可能会出现此错误。

如果您使用Angular应用程序，则不必在文件index.html中使用CSS文件路径：

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

您可以在styles.css文件中使用相关的CSS文件路径。

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
小开

您必须导入多个样式表。请尝试删除一个，然后重试。

小开

我正在使用React应用程序，也遇到了这个错误，导致我来到这里。这对我有帮助。

我没有在index.html中添加<link>，而是在需要使用此样式表的组件中添加了import：

import 'path/to/stylesheet.css';
小开

我遇到了一个类似的错误，发现错误是在style.css链接href的末尾添加/。

将<link rel="stylesheet" href="style.css/">替换为<link rel="stylesheet" href="style.css">修复了此问题。

小开

如果您正在使用Node.js应用程序，请确保\public文件夹位于根文件夹的正下方，而不是视图文件夹中。

这可能会变得很麻烦。将\public移动到根目录下，然后重新启动服务器并见证更改。

小开

在我的例子中，我必须确保链接是相对的，rel属性在href属性之后：

<link href="/assets/styles/iframe.css" rel="stylesheet">
小开

我几乎尝试了所有给定的解决方案。对我来说，问题是我在IIS中没有任何MIME类型选项，也就是说，我缺少这个Windows功能。

的解决方案对我来说是：

“如果您使用的是Windows 8或10等非服务器操作系统，请在起始页上搜索“打开或关闭Windows功能”并启用：互联网信息服务->万维网服务->通用HTTP功能->静态内容”

启用IIS静态内容

启用IIS静态内容

小开

我知道这可能是断章取义，但链接一个不存在的文件可能会导致这个问题，因为它发生在我之前。

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

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

小开

我也面临着同样的问题。

我将目录权限更改为755（（U）ser/Owner可以读，可以写，可以执行。（G）组可以读，不能写，可以执行。（O）其他人可以读，不能写，可以执行。）现在所有的文件都在加载中。

你也可以试试我的答案。我希望这对你有用。

小开

我在选择2中遇到了这个挑战。在我下载了最新版本的库并替换了我项目中的那个（CSS和JavaScript文件）后，它得到了解决。

小开

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

小开

在我的情况下是问题在更改. scss文件中的随机值后得到解决。重新加载后问题消失了，样式开始加载良好。简单，但有效：P

小开

我在XAMPP安装中使用了虚拟域并得到了这个问题。所以在我检查的httpd-vshosts.conf文件中，我明确指向了index.php文件，这导致了问题。

所以我改变了这个：

<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/cv/index.php"
ServerName cv.dv
</VirtualHost>

对此：

<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/cv/"
ServerName cv.dv
</VirtualHost>

然后文件被加载没有问题。

小开

在我的Angular-Ionic项目中，我有一个像这样的CSS条目，用于仅在我请求时加载的组件。

 .searchBar {
// --placeholder-color: white;
// --color: white;
// --icon-color: white;
// --border-radius: 20px;
// --background: color:rgba(73,76,67,1.0);
// --placeholder-opacity: 100%;
// background-color: red;
}

一旦我注释掉CSS类条目中的所有值，它就又开始工作了。

我认为这是由于将这些属性background-color和--background放在一起而发生的。

小开

这是特定于TypeScript和Express.js

我Ctrl+Fd“TypeScript”和“. ts”，在这些答案中没有找到任何东西，所以我将在这里添加我的解决方案，因为它是由（我对TypeScript缺乏经验）引起的，我读过的解决方案并没有明确解决这个特定的问题。

问题是TypeScript将我的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.js实际上运行的是TypeScript，这将是一个有效的路径。但Node.js正在运行编译的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")));
小开

除了使用：

<base href="/">

从CSS链接中删除rel="stylesheet"部分：

<link type="text/css" href="assets/styles/custom-style.css"/>
小开

我是怎么解决的。 对于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'));

小开

我想分享一些关于这个话题的想法，当我把

app.use(expres.static('../frontEnd/public'))

它不工作，但当我使用

app.use(express.static('/frontEnd/public'))

它运行良好。

小开

每个人的评论都没有帮助我，解决方案是修复路由，因为从主页我找到了文件，但当我导航它消失时，正确的解决方案会说把这些东西放好

输入图片描述

输入图片描述

小开

我也遇到了同样的问题：这是解决方案。不要在. html文件的CSS链接路径中写入公共。虽然您的. css文件存在于公共文件夹中。

示例：

javascript文件

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

超文本标记语言文件

用这个

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

而不是

<link href="index/styles.css" rel="stylesheet">
小开

还请检查您的文件名中的拼写错误。这发生在我身上：

style.css.css
小开

添加Express.js默认静态中间件为：

进口快递const express = require("express")

初始化Expressconst app = express()

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

然后你需要使用public directory的完整路径

例如：

您在public directory中的文件结构

public > css > style.css

你的道路将是

<link rel="stylesheet" type="text/css" href="./public/css/style.css"/>

注1：

您可以使用任何名称代替public，即assetsmyassetsany other。

注意2：您的服务器应该在主目录中运行。 如果您的服务器在子目录中运行，那么您可以使用…/

小开

https://github.com/froala/angular-froala/issues/170#issuecomment-386117678 找到上述添加的解决方案

href="/">

就在index.html的样式标签之前

在此处输入图片描述

小开

有时，当找不到CSS文件时会发生这种情况。值得检查文件的基本URL/路径。

小开

面对类似的问题并使用这个简单的修复解决了它。如果您的项目是基于React的，那么不要在“index.html”中导入您的“styles.css”，而是将其导入通常驻留在项目的“src”文件夹中的“index.js”中。这将确保您的React应用程序中的所有路由都可以访问样式文件。

小开

我在EJS和Node.js中遇到了同样的问题。

我已经设置了我的视图引擎的公共文件夹，如下所示：

app.use('/public', express.static(process.cwd() + '/public'));


app.set('view engine', 'ejs');

我的目录结构是这样的

public
|
-assets
|
--CSS
|---style.css

我试图将我的Style.css连接到EJS中，就像这样

<link href="/assets/css/style.css" rel="stylesheet" type="text/css">

添加和public解决了问题（确保检查网络选项卡）

<link href="/public/assets/css/style.css" rel="stylesheet" type="text/css">
小开

这是一条错误的道路。

我的道路是

href="public/css/style.css".  <!-- But it should be href="public/style.css" -->

但它不起作用。我尝试了所有其他方法，但仍然不起作用。所以我复制相对路径，将反斜杠更改为正斜杠，然后它开始工作。

如果您不确定路径，请右键单击style.css文件，单击“复制相对路径”，然后将其粘贴到

  href="public\style.css"

您只需要将后斜杠更改为正斜杠。

  href="public/style.css"

在此输入图片描述

小开

对于nodejs用户，使用这个。 这应该解决了Node的问题。

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

小开

一个对我有效的解决方案是将css文件名从“style.css”更改为另一个名称，例如“component.css”。

小开

另一个原因可能是2 apache. conf文件，其中，如果您的配置强制https，那么您的服务器将忽略您的站点启用/http-default.conf.中设置的变量例如，如果您在http-default.conf中定义了“/静态”，但没有https-ssl.conf那么您的静态文件可能找不到，即404。

小开

localhost的路径不同，当通过file://和部署时可访问…


提交答案