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

下载了几个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文件被当成了模块,是这样的引入方式有误吗?还是别的什么原因?
求指教~谢谢!

阅读 5.9k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题