样式表未加载，因为MIME-type

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文件时，也会出现此错误。

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

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

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

Answer 2

我想，问题是CSS库从注释开始。

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

删除库并将其放入一个供应商文件（该文件总是被缩小而没有注释）解决了这个问题。

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

Answer 3

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

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

请注意，/public末尾没有正斜杠，因此需要将其包含在HTML的href选项中：

href="/css/style.css">

如果包含了正斜杠(/public/)，则只需执行href=“css/style.css”。