由于mime类型，样式表没有被加载

I'm working on a website that uses gulp to compile and browser sync to keep the browser synced with my changes.

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

The gulp task compiles everything properly, but on the website, I'm unable to see any style, and the console shows this error message:

gulp任务正确地编译了所有内容，但是在网站上，我看不到任何样式，控制台显示了这个错误消息:

Refused to apply style from 'http://localhost:3000/assets/styles/custom-style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

拒绝从“http://localhost:3000/assets/styles/ customstyle”应用样式。因为它的MIME类型('text/html')不是一个受支持的样式表MIME类型，并且启用了严格的MIME检查。

Now, I don't really understand why this happens.

我不明白为什么会这样。

The HTML includes the file like this (which I am pretty sure is correct):

HTML包含这样的文件(我很确定它是正确的):

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

and the stylesheet is a merge between bootstrap & font-awesome styles for now (nothing custom yet).

样式表是bootstrap和font-awesome风格之间的合并(目前还没有任何定制)。

The path is correct as well, as this is the folder structure:

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

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

But I keep getting the error.

但我还是得到了误差。

Any idea what it could be? is this something (maybe a setting?) for gulp/browsersync maybe?

知道是什么吗?这可能是gulp/browsersync的设置吗?

Any help is really appreciated, and feel free to ask for more details if needed.

任何帮助都是非常感激的，如果需要的话，可以询问更多的细节。

Thanks

谢谢

16 个解决方案

#1

make a folder just below/above style.css file as per angular structure and provide link like <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

制作一个刚好在/上面的文件夹。css文件根据角度结构提供链接，如

#2

Ok I think I found a solution and I'm writing it here in case helps somebody else.

好吧，我想我找到了一个解决方案，我写在这里，以备他人帮助。

The issue i think it was with a CSS library starting with comments. While on dev, i do not minify files and i don't remove comments, this meant that the stylesheet started with some comments, causing it to be seen as something different from css.

我认为问题是CSS库从注释开始。在dev上，我没有缩小文件，也没有删除注释，这意味着样式表以一些注释开始，导致它被视为与css不同的东西。

Removing the library and putting it into vendor file (which is ALWAYS minified without comments) solved the issue.

删除库并将其放入供应商文件(通常不带注释地缩小)解决了这个问题。

Again, i'm not 100% sure this is a fix, but it's still a win for me as it works as expected now.

同样，我也不能百分之百地确定这是一个解决方案，但这对我来说仍然是一个胜利，因为它现在的效果和预期一样。

#3

For Node.js applications, check your configuration:

为节点。js应用程序，检查配置:

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

app.use(表达。静态(__dirname + ' /公共'));

Notice that /public does not have a forward slash at the end, so you will need to include it in your href option of your html:

注意/public结尾没有斜杠，所以需要在html的href选项中包含:

href="/css/style.css">

href = " / css / style.css " >

If you did include a forward slash (/public/) then you can just do href="css/style.css"

如果你包含了一个斜杠(/public/)那么你只需要做href="css/style.css"

Hope that helps, Thanks

希望有所帮助,谢谢

#4

This error can also come up when you're not referring to your css file properly.

当您没有正确地引用css文件时，也会出现这个错误。

For example, if your link tag is

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

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

but your CSS file is named style.css (without the second s) then there is a good chance that you will see this error.

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

#5

Also for others using angular-cli and publishing to a sub-folder on the webserver, check this answer :

对于使用angular-cli并将其发布到webserver上的子文件夹的其他用户，请检查以下答案:

When you're deploying to non-root path within a domain, you'll need to manually update the <base href="/"> tag in your dist/index.html.

在域内部署到非根路径时，需要手动更新dist/index.html中的标记。

In this case, you will need to update to <base href="/sub-folder/">

在这种情况下，您需要更新到

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

#6

Comments in your file will trip this. Some minifiers will not remove comments.

文件中的注释将会被打断。一些缩小器不会删除注释。

ALSO

也

If you use NodeJS and set your static files using express such as:

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

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

You need to properly address the files.

您需要正确地处理这些文件。

In my case both was the issue so I prefixed my CSS links to "/css/styles.css"

在我的例子中这两个都是问题所以我把CSS链接加到"/ CSS /styles.css"

Example:

例子:

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

#7

You can open the chrome tools, select the network tab, reload your page and find the file request of the css and look for what it have inside the file. Maybe you did something wrong when you merge the two libraries in your file, including some characters or headers not properly for css ?

您可以打开chrome工具，选择network选项卡，重新加载页面，找到css的文件请求，并查找文件中包含的内容。也许您在合并文件中的两个库时做了一些错误的事情，包括一些字符或标题在css中不正确?

#8

my problem is that I was using webpack and in my html css link I had a relative path, and anytime i would navigate to a nested page, that would resolve to the wrong path:

我的问题是我使用的是webpack，在我的html css链接中，我有一个相对路径，任何时候我都要导航到一个嵌套的页面，这就会导致错误的路径:

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

so the simple solution was to remove the . since mine is a single page app. like this:

所以简单的解决办法就是把。因为我的是一个单页应用程序。

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

so it always resolves to /index.css

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

#9

For Node.js application. Just use this after importing all the required mudules in your server file:

为节点。js应用程序。在您的服务器文件中导入所有必需的mudules之后，就可以使用这个:

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

express.static built-in middleware function in Express and this in your .html file: <link rel="stylesheet" href="style.css">
表达。静态内置中间件功能在Express中，这在您的.html文件中: 中

#10

I am getting the same issue and then I checked I wrote

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

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

<基地href = "。在index . html ">

Then I changed to

然后我改变了

<base href="/">

then it works fine

那么它工作正常

#11

In my case when I was deploying the package live, I had it out of the public HTML folder, it was for a reason.

在我的情况下，当我实时部署包时，我将它从公共HTML文件夹中取出，这是有原因的。

But apparently strict mime type check has been activated, I am not too sure if it's on my side or by the company I am hosting with.

但是显然，严格的mime类型检查已经被激活，我不太确定它是在我这边还是在我的主机上。

But as soon as I moved the styling folder in the same directory as the index.php file I stopped getting the error, and styling was activated perfectly.

但是，只要我将样式文件夹移动到与索引相同的目录中。php文件我停止获取错误，样式被完美激活。

#12

Triple check the name and path of the file. In my case I had something like this content in the target folder:

三重检查文件的名称和路径。在我的案例中，目标文件夹中有类似的内容:

lib
    foobar.bundle.js
    foobr.css

And this link:

和这个链接:

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

I guess that the browser was trying to load the js file and complaining about its mime type instead of giving me a file not found error.

我猜浏览器试图加载js文件并抱怨它的mime类型，而不是给我一个没有找到错误的文件。

#13

I had the same problem and after hours of debugging I found out that it is related to temporary files not able to be written. Go to admin > config > File system. Set correct temporary directory. Make sure your server has permission to write to that directory.

我遇到了同样的问题，经过数小时的调试，我发现它与临时文件有关，无法编写。进入admin >配置>文件系统。设置正确的临时目录。确保您的服务器已允许写入该目录。

#14

I had this error, in Angular. The way I solved it was to put an ngIf on my link element so it didn't appear in the Dom until my dynamic URL was populated.

我有一个角度的误差。我解决这个问题的方法是在我的链接元素上放一个ngIf，这样在填充动态URL之前它不会出现在Dom中。

May be unrelated to OP a little but I ended up here looking for an answer

可能和OP没有一点关系但是我来这里是为了寻找答案

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

#15

One of the main reason for the issue, the CSS file which trying to load isn't valid CSS file. causes:- invalid MIME type, having Javascript code inside style sheet- (may occur due to incorrect webpack bundler config)

这个问题的主要原因之一是，试图加载的CSS文件不是有效的CSS文件。原因:-无效的MIME类型，样式表中包含Javascript代码—(可能由于webpack bundler配置错误而出现)

Check the file which you're trying to load is a valid CSS style sheet(Get the server URL of the file from network tab and hit in a new tab and verify)

检查要加载的文件是否是一个有效的CSS样式表(从network选项卡获取文件的服务器URL并点击一个新的选项卡并进行验证)

Useful info for consideration when using inside body tag.

在使用内体标签时需要考虑的有用信息。

Though having link tag inside the body is not the standard way to use the tag. but we can use it for page optimization(more info: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) / if the business use case demands(When you serve the body of the content and server configured to have to render HTML page with content provided).

虽然在主体内部有链接标签并不是使用标签的标准方式。但是我们可以将它用于页面优化(更多信息:https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery) /如果业务用例需要(当您服务于配置为必须提供内容的内容和服务器主体时)。

While keeping inside the body tag we have to add attribute itemProperty in link tag like <body>  <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />  </body>

在保持在body标签内的同时，我们必须在link标签中添加属性itemProperty，比如 < itemprop链接= " url " href = " http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye " / > < !——…> < /身体>

more info on itemProperty have a look on : https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document

关于itemProperty的更多信息请看:https://webmasters.stackexchange.com/questions/55130/can-i-use- tag -in-the-body- html-document

#16

In Node.js, Please check the app.js file. It have an entry like:

在节点。js，请查看app.js文件。它有这样一个条目:

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

或

app.use(express.static(__dirname + '/public'));
app.use(表达。静态(__dirname + ' /公共'));

或

app.use(express.static(__dirname + '/public/'));
app.use(表达。静态(__dirname + ' /公共/ '));

Notice that in 1 and 2 /public does not have a forward slash at the end, so you will need to include it in your href option of your html:

请注意，在1和2 /public中，末尾没有斜杠，因此您需要将它包含在html的href选项中:

href="/css/style.css"

otherwise (3rd option)

否则(第三个选项)

you will need to include it in your href option of your html:

您需要在html的href选项中包含它:

href="css/style.css"

#1