运行项目时,弹出以下信息:

这时候根据报错信息,但要注意一点:后面的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字体图标库导入未显示的问题的更多相关文章

  1. 字体图标库 IcoMoon IconFont Font Awesome的使用

    在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...

  2. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  3. 在nuxt中引入Font Awesome字体图标库

    介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...

  4. icon font字体图标字库汇总

    最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...

  5. 字体图标库 iconfont、iconmoon 的维护管理与使用探索

    字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...

  6. css3 - 字体图标库使用方法

    一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...

  7. Font Awesome图标库

    Font Awesome 是一个非常方便的图标库.这些图标都是矢量图形,被保存在 .svg 的文件格式中.这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小 ...

  8. jQuery插件fontIconPicker配合FontAwesome字体图标库的使用

    同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...

  9. uni-app在线引入阿里字体图标库

    第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...

随机推荐

  1. 零元学Expression Blend 4 - Chapter 1 缘起

    原文:零元学Expression Blend 4 - Chapter 1 缘起 本来都使用Adobe相关工具从事设计工作的我,因缘际会下,接触到了Expression Blend 4,让我完全的对微软 ...

  2. eclipse 插件编写(一)

    由于项目开发进程中有一些重复性的代码进行编写,没有任何业务逻辑,粘贴复制又很麻烦且容易出错,故想起做一个eclipse插件来满足一下自己的工作需要,同时记录一下,以供以后参考与共同学习.本文主要讲解一 ...

  3. 批处理(bat)实现SQLServer数据库备份与还原

    原文:批处理(bat)实现SQLServer数据库备份与还原 备份数据库.bat @echo off set path=%path%;C:\Program Files (x86)\Microsoft ...

  4. MongoDB数据查询

    启动MongoDB:sudo service mongodb start,mongo 经测试,键可加引号也可不加,但是值一般要加引号,数值类型除外 MongoDB区分大小写,命名通常采用驼峰式命名法 ...

  5. javascript学习路线图

    史上最全的javascript学习路线图 JavaSctipt学习路线 完成整个课程大纲需要花上6~8周的时间,将学会完整的JavaScript语言(包括jQuery和一些HTML5).如果你没有时间 ...

  6. IntelliJ IDEA的jsp中内置对象方法无法被解析的解决办法

    主要原因是因为缺乏依赖 可以通过添加依赖的方式 导入servlet-api.jar,jsp-api.jar,tomcat-api.jar 这三个jar即可 这三个jar在tomcat的lib目录下有 ...

  7. Qt移动开发大部分的场景基本上实现没问题,listview支持刷新3000~5000的实时数据没有任何压力(QML的几个大型应用)

    作者:xq zh链接:https://www.zhihu.com/question/29636221/answer/47265577来源:知乎著作权归作者所有,转载请联系作者获得授权. 不知道vs移动 ...

  8. 如何在 Xcode 中进行 Qt 开发(可使用使用 Homebrew 来安装qt)

    第一步 安装 Qt 分为两种情况: 1. 希望使用 Qt Quick 等先进Qt5技术, 2. 只需要 Qt 4.8的类库即可. 第一种, 直接去官网下载 Mac安装包, 在此不作过多说明, 开发时也 ...

  9. elasticsearch local debug环境搭建

    最近计划看看elasticsearch的源码,首先得把local debug环境搞定. 下载源码.因为公司产线是5.6.5,所以就下载了5.6.5的代码. 源码编译.先进入到/elasticsearc ...

  10. awk数组统计

    处理以下文件内容,将域名取出并根据域名进行计数排序处理:(百度和sohu面试题) http://www.etiantian.org/index.html http://www.etiantian.or ...