我正在开发一个网站,该网站使用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?
对于node.js应用程序,请检查您的配置:
app.use(express.static(__dirname + '/public'));
请注意,/public
末尾没有正斜杠,因此需要将其包含在HTML的href选项中:
href="/css/style.css">
如果包含了正斜杠(/public/
),则只需执行href=“css/style.css”
。
我想,问题是CSS库从注释开始。
在开发过程中,我不会缩小文件,也不会删除注释。这意味着样式表以一些注释开始,导致它被视为与CSS不同的东西。
删除库并将其放入一个供应商文件(该文件总是被缩小而没有注释)解决了这个问题。
再一次,我不是100%肯定这是一个修复,但它仍然是一个胜利,因为它的工作现在预期的。
当您没有正确引用CSS文件时,也会出现此错误。
例如,如果您的链接标记是
<link rel="stylesheet" href="styles.css">
但是您的CSS文件名为style.CSS
(没有第二个s),那么您很有可能会看到这个错误。