由于MIME類型未加載樣式表

本文翻譯自：Stylesheet not loaded because of MIME-type

I'm working on a website that uses

gulp

to compile and browser sync to keep the browser synchronised 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 / custom-style.css '應用樣式，因為它的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" target="_blank" rel="external nofollow" />
           

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

樣式表目前是Bootstrap和超贊字型之間的合并（尚無自定義）。

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.

但是我一直在得到錯誤。

What could it be?

會是什麼呢？

Is this something (maybe a setting?) for gulp/browsersync maybe?

這是gulp / browsersync的東西（也許是設定嗎？）？

#1樓

參考：https://stackoom.com/question/3grIY/由于MIME類型未加載樣式表

#2樓

You can open the Google 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.

您可以打開Goog​​le Chrome浏覽器工具，選擇“網絡”标簽，重新加載頁面并找到CSS的檔案請求，然後查找檔案中包含的内容。

Maybe you did something wrong when you merged the two libraries in your file, including some characters or headers not properly for CSS?

合并檔案中的兩個庫時，包括某些字元或标頭不适用于CSS時，也許您做錯了什麼？

#3樓

The issue, I think, was with a CSS library starting with comments.

我認為問題在于CSS庫以注釋開頭。

While in development, 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不同。

Removing the library and putting it into a 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.

再次，我不是100％地确定這是修複程式，但是對我來說仍然是一個勝利，因為它現在可以按預期運作。

#4樓

For Node.js applications, check your configuration:

對于Node.js應用程式，請檢查您的配置：

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

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" target="_blank" rel="external nofollow" >
           

If you did include a forward slash (

/public/

) then you can just do

href="css/style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow"

.

如果确實包含正斜杠（

/public/

），則可以執行

href="css/style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow"

。

#5樓

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 application .

因為mine是單頁應用程式 。

Like this:

像這樣：

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

so it always resolves to

/index.css

是以它始終解析為

/index.css

#6樓

For a Node.js application, just use this after importing all the required modules in your server file:

對于Node.js應用程式，隻需在伺服器檔案中導入所有必需的子產品後使用它：

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

• express.static built-in middleware function in Express and this in your .html file: <

  link rel="stylesheet" href="style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >

  Express中的express.static内置中間件函數以及您的.html檔案中的函數：<

  link rel="stylesheet" href="style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >