由于MIME类型未加载样式表

Question

我正在开发一个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这可能是什么(可能是一个设置？)​​？

任何帮助都非常感谢,如果需要,可以随时询问更多细节.

谢谢

Answer 1

好吧,我想我找到了一个解决方案,我在这里写它,以防其他人帮忙.

我认为这个问题出现在一个以评论开头的CSS库.在开发时,我不缩小文件,我不删除注释,这意味着样式表开始时有一些注释,导致它被视为与css不同的东西.

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

再说一遍,我不是百分百肯定这是一个修复,但它仍然是一个胜利,因为它现在按预期工作.

Answer 2

对于/public应用程序,请检查配置:

/public/

请注意,最后href="css/style.css"没有正斜杠,因此您需要将其包含在html的href选项中:

/public

如果你确实包含了正斜杠(/public/),那么你可以这样做href="css/style.css"

希望有所帮助,谢谢

Answer 3

当您没有正确引用css文件时,也会出现此错误.

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

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

但你的CSS文件被命名style.css(没有第二个s),那么很有可能你会看到这个错误.

Answer 4

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 根据角度结构并提供链接 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

Answer 5

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

浏览器遵循<link rel="stylesheet" ...>标签中的这个(错误的)路径,目的是应用CSS样式.但返回的内容类型相互矛盾,因此会记录错误.

Answer 6

我有一个bootstrap模板的错误.

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

然后我rel="stylesheet"从链接中删除了,即:

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

一切正常.如果您使用的是bootsrap模板,请尝试此操作.

Answer 7

我改变了'href' - >'src'.所以从这个:

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

对此:

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

凌晨3点在这里工作,不知道为什么现在,但它完成了这项工作.

Answer 8

除了使用：

<base href="/">

rel="stylesheet"从您的 css 链接中删除该部分：

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

Answer 9

我知道这可能与上下文无关，但链接一个不存在的文件可能会导致这个问题，就像我以前发生过的那样。

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

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

Answer 10

您文件中的评论将使此行为.一些minifiers不会删除评论.

也

如果您使用NodeJS并使用express设置静态文件,例如:

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

您需要正确地处理文件.

在我的情况下,两个都是问题,所以我将我的CSS链接加前缀为"/css/styles.css"

例:

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

Answer 11

我只是在angular.json中我的angular 6构建配置的样式部分引用了css文件(在我的例子中是一个角度主题)

这不是回答问题,但可能是一个合适的解决方法,因为它适合我.希望能帮助到你.

Answer 12

正如本文中提到的解决方案,一些解决方案对我有用,但CSS不适用于页面.

简单地说,我只是将"css"目录移动到"Assest /"目录中,一切正常.

__CODE__

Answer 13

对于使用angular-cli并发布到网络服务器上的子文件夹的其他人,请检查以下答案:

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

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

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

Answer 14

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

Answer 15

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

Answer 16

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

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

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

Answer 17

我的问题是我正在使用webpack并且在我的html css链接中我有一个相对路径,并且无论何时我将导航到嵌套页面,这将解析到错误的路径:

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

所以简单的解决方案就是删除.因为我的单页应用程序.像这样:

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

所以它总是解决 /index.css

Answer 18

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

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

Answer 19

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

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

• Express 中的 express.static 内置中间件函数以及您的 .html 文件中的这个：<link rel="stylesheet" href="style.css">

Answer 20

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

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

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

Answer 21

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

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

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

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

Answer 22

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

我没有添加<link>到，而是向需要使用此样式表的组件添加了 ：index.htmlimport

import 'path/to/stylesheet.css';

Answer 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 链接指向的位置。

Answer 24

我得到了同样的问题然后我检查了我写的

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

然后我改为

<base href="/">

然后它工作正常

Answer 25

这是特定于 TypeScript 和 Express.js 的

\n

我Ctrl+F \'d“TypeScript”和“.ts”，但在这些答案中找不到任何内容，因此我将在此处添加我的解决方案，因为它是由（我对 TypeScript 缺乏经验）和我读过的解决方案引起的不要明确解决这个特定问题。

\n

问题是 TypeScript 正在将我的app.ts文件编译成项目dist目录中的 JavaScript 文件，dist/app.js .

\n

这是我的目录结构。看看你是否能发现问题：

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app.js.map\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 js\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dbclient.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dbclient.js.map\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 mutators.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 mutators.js.map\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 css\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 styles.css\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tslint.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.hbs\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 results.hbs\n

\n

我的问题是app.ts，在 中，我告诉express 将我的公共目录设置为，如果Node.js实际上正在运行 TypeScript，/public这将是一个有效的路径。但是 Node.js 正在运行编译后的 JavaScript，它位于app.jsdist目录中。

\n

所以app.ts 假装它解决dist/app.js了我的问题。因此，我解决了这个问题app.ts因此，我通过改变

\n

app.use(e.static(path.join(__dirname, "/public")));\n

\n

到

\n

app.use(e.static(path.join(__dirname, "../public")));\n

\n

Answer 26

How I solved this. For Node.js applications, you need to set your **public** folder configuration.

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

Otherwise, you need to do like href="public/css/style.css".

<link href="public/assets/css/custom.css">
<script src="public/assets/js/scripts.js"></script>

Note: It will work for http://localhost:3000/public/assets/css/custom.css. But couldn't work after build. You need to set app.use(express.static(__dirname + '/public')); for Express

Answer 27

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

href="/">

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