html引入本地css样式无效,vue在index.html里面引入css文件样式加载失败

问题描述

我在vue的index.html里面引入本地的第三方CSS文件，浏览器会出现一个提示，同时样式也没有生效

问题出现的环境背景及自己尝试过哪些方法

网上搜索了一下说是什么拦截器的问题，但没有找到和vue相关的修改方法

相关代码

(额，segmentfault的规定，让我必须把代码写在这里，手动滑稽)

你期待的结果是什么？实际看到的错误信息又是什么？

希望大神帮忙解惑，谢谢了。

更新： 恩，试了楼下二位的办法，都不行，不过我引用外部CDN的font-awesome的css路径是可以的，所以我觉得还是其他问题。我目前的解决办法是把css文件直接在main.js里引入，待想到办法再说吧。谢谢诸位。

回答：

一般在Response Headers中， CSS的Content-Type应该是：Content-Type: text/css，但不知什么原因，返回了: Content-Type: text/html; 导致了类型错误。

可以尝试一下：

重启你的调试器(webpack或其它)

采用绝对路径/your/path/to/font-awesome.min.css取代相对路径./your/path/to/font-waesome.min.css

新建一个*.css后缀的文件，把原本的css文本全部复制过去即可

我更偏向font-awesome.min.css这个文件的格式出了问题(即第三点)。

——————————

补充一下：针对@木马啊 的建议，因为我也不习惯在页面声明type="text/css"，所以我特地搜索了一下：

stackoverflow关于type的回答，回答指出，在HTML5标准中，type是一个建议性的声明，在现代浏览器中并不会对资源解析产生实质影响，假若只通过声明type="text/css"就能解决提问者的困扰，也请提问者答复一下。

回答：

下午重新换了一个思路，问题解决了，第三方的css或者js需要放在和src同级的static文件夹下然后再在index.html里引用才会有效

我试过即使我在src的同级目录下建一个plugins文件夹也是不行的。后来反正百度了一下，没看太明白，但大致意思是这个是config配置里做的操作

src里面的东西最好是通过es6的import这种方式引入。大致如此，具体不知，还亲知道的朋友指点。

回答：

看提示是少了 type=”text/css”，在link标签中加上这个属性就可以了。