vue.js引入阿里图标的iconfont.css报错,何解?

Question

下载了几个IconFont的图标,想引入压缩包里的css,再用<i class="iconfont icon-xxx"></i>的方式使用,未成功~

项目目录如下:

几种引入方式及表现如下:
1.在index.html内用<link rel="stylesheet" href="src/css/iconfont.css">引入;
表现:npm未报错,但浏览器调试network如下,iconfont.css文件状态为404

2.在main.js引入:import './css/iconfont.css';或在使用到此图标的.vue组件内引入:

<style>
@import '../css/iconfont.css'
  
</style>

表现相同,如下报错且调试network无iconfont.css文件:

看报错好像是css文件被当成了模块,是这样的引入方式有误吗?还是别的什么原因?
求指教~谢谢!

Answer 1

引用方式没错。
注意看报错信息，提到了.eot、.svg、.ttf之类的文件，排查你引入的css文件里面是不是有这类文件。
一般阿里icon下个图用就行了，省事