关于vue项目font字体图标库导入未显示的问题
运行项目时,弹出以下信息:
这时候根据报错信息,但要注意一点:后面的css-loader和vue-loader必须有先安装过,不然程序还是报错的。这里我们是想导入icon.scss然后出错,可能是配置文件的缘故。所以进入build文件夹下的webpack.base.conf.js
上面的loader说明加载是依赖'url-loader',然而我们打开_icon.scss文件。发现这里的loader加载的是'url-loader',而不是'url'。

所以我修改了,如下图:
然后,将程序再跑一次,文件加载正常,如果遇到如图情况:不报错,但是不显示,则执行以下操作。
解决办法就是将 font.styl/scss 改成 font.css。这里是网上的,我的是icon.scss,然后我修改成icon.css,这同样也可以。
然后在用的图标地方引入
这样就大功告成。这个问题困扰了我好几天,都没认真去找出问题,现在解决了。以上方法如果都不成功,那只能去FQ找找看了,这些已经是百度上的总结之后的方法。嘻嘻~~~
可以关注:我的 博客:http://kaiserl.com/
关于vue项目font字体图标库导入未显示的问题的更多相关文章
- 字体图标库 IcoMoon IconFont Font Awesome的使用
在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...
- vue引入iconfont阿里字体图标库以及报错解决
下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader) ,记得--save ...
- 在nuxt中引入Font Awesome字体图标库
介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...
- icon font字体图标字库汇总
最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...
- 字体图标库 iconfont、iconmoon 的维护管理与使用探索
字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...
- css3 - 字体图标库使用方法
一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...
- Font Awesome图标库
Font Awesome 是一个非常方便的图标库.这些图标都是矢量图形,被保存在 .svg 的文件格式中.这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小 ...
- jQuery插件fontIconPicker配合FontAwesome字体图标库的使用
同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...
- uni-app在线引入阿里字体图标库
第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...
随机推荐
- OpenSSL的命令行用法,以及参数大全
c:\openssl\bin>opensslOpenSSL> versionOpenSSL 1.0.2j 26 Sep 2016OpenSSL> https://wiki.opens ...
- SYN5301型 时间检定装置
SYN5301型 时间检定装置 夹具概述 我们的夹具可以水平放置测秒表,也可以垂直测秒表,而其他厂家的夹具只能水平放置测,如果想垂直测的话得依靠在墙上或者是其他的物体上来测,这样的检测出来的数据 ...
- Python连载12-shutil模块
一.shutil模块 1.函数:copy() (1)用法:复制文件0 (2)格式:copy(来源路径,目标路径) (3)返回值:返回目标路径 (4)注意:拷贝的同时可以给文件重命名 source_pa ...
- Vim入门操作整理
根据小甲鱼的vim入门视频整理,供查阅 移动指令:上下左右 k j h l 翻页: ctrl + b ctrl + f 保存退出:ZZ 普通模式:vim fileName 首次进入的就是普通模式 从 ...
- Python自学day-12
一.Mysql概述 RDBMS:关系型数据库管理系统.Mysql是一种RDBMS. Oracle:收费 Mysql:Oracle旗下免费 Sqlserver:微软 DB2:IBM Postgresql ...
- spring boot 2.x 系列——spring-boot 集成 Swagger2 打造在线接口文档
文章目录 一.Springfox 与 Swagger 简介 1.1 Springfox 1.2 Swagger 1.3 OpenApi.Swagger.Springfox的关系 二.spring bo ...
- HTML连载19-子元素选择器&交集选择器
一.子元素选择器 1.定义:找到指定标签中所有特定的直接子元素,然后设置属性 2.格式: 标签名称一>标签名称2{ 属性:值: } 3.释义:先找到叫做“标签名称1”的标签,然后在这个标签中查找 ...
- Paxos算法——前世
Paxos算法是基于消息传递且具有高度容错特性的一致性算法.我们将从一个简单的问题开始,逐步的改进我们的设计方案,最终得到Paxos,一个可以在逆境下工作的协议. 一.客户端-服务器模型 我们从最小的 ...
- cat more less 命令混用
在Linux系统中有三种命令可以用来查阅全部的文件,分别是cat.more和less命令.它们查阅文件的使用方法也比较简单都是 命令 文件名 ,但是三者又有着区别. 1.cat命令可以一次显示整个文件 ...
- 为什么wepy的数据无法渲染到实例里面去
为啥明明WEPY是将数据渲染到视图还会出这个问题呢? 因为只是类似于 Vue 框架,所以不能完全实现数据渲染,尤其当异步操作的时候. (1)WePy 普通数据绑定. WePY使用脏数据检查对setDa ...