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

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

项目目录如下:

https://img2.mukewang.com/5c7e202b000115e701790597.jpg


几种引入方式及表现如下:

1.在index.html内用<link rel="stylesheet" href="src/css/iconfont.css">引入;

表现:npm未报错,但浏览器调试network如下,iconfont.css文件状态为404

https://img3.mukewang.com/5c7e20300001dbef04830143.jpg


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


<style>

@import '../css/iconfont.css'

  

</style>

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

https://img1.mukewang.com/5c7e20340001236508000418.jpg


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

求指教~谢谢!


桃花长相依
浏览 1900回答 1
1回答

繁华开满天机

引用方式没错。注意看报错信息,提到了.eot、.svg、.ttf之类的文件,排查你引入的css文件里面是不是有这类文件。一般阿里icon下个图用就行了,省事
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript