vue在index.html里面引入css文件样式加载失败

Question

问题描述

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

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

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

相关代码

<link rel="stylesheet" href="./src/plugins/font-awesome/css/font-awesome.min.css">

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

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

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

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

Answer 1

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

可以尝试一下：

1. 重启你的调试器（webpack或其它）
2. 采用绝对路径/your/path/to/font-awesome.min.css取代相对路径./your/path/to/font-waesome.min.css
3. 新建一个*.css后缀的文件，把原本的css文本全部复制过去即可

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

——————————

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

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

Answer 2

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

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

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

Answer 3

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