运行项目时，弹出以下信息：

这时候根据报错信息，但要注意一点：后面的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. C# WebRequest POST上传数据

    WebRequest request = WebRequest.Create("http://www.cnsos.net"); // Set the Method property ...

  2. UWP入门（十二）--数据绑定用法

    原文:UWP入门(十二)--数据绑定用法 主要几个元素: Template DataTemplate ItemSource 数据绑定是一个数据提取的方法,能使数据和UI上的控件紧密相连,下面的Demo ...

  3. ExtJS 折线图趟过的坑

    问题: 1.根据条件检索后绘制折线图,之前的坐标没有清除如图 解决方案: 在绘制之前,清空坐票: leftLine.surface.removeAll(); leftLine.redraw(false ...

  4. 想让一个Widget成为模态，我们只需要对其设置setAttribute(Qt::WA_ShowModal, true);

    想让一个Widget成为模态,我们只需要对其设置: setAttribute(Qt::WA_ShowModal, true); 注意:这是QWidget的成员函数 ,也就是说,QWidget可以显示为 ...

  5. PRML Chapter3

    曲线拟合的几种方法 最大似然估计MLE,最大后验概率MAP:MLE和MAP MLE 给定一堆数据,假如我们知道它是从某一种分布中随机取出来的,可是我们并不知道这个分布具体的参,即"模型已定, ...

  6. 智能合约开发——以太坊 DApp 实现 购买通证token

    合约的buy()方法用于提供购买股票的接口.注意关键字payable,有了它买股票的人才可以付钱给你. 接收钱没有比这个再简单的了! function buy() payable public ret ...

  7. Centos7安装Mysql-最方便、最快捷

    你想在Linux操作系统安装Mysql?你不想去官网下载再复制?,那就来看看我的方案,简单.快捷轻松安装.使用. 首先,检查安装情况         1.查看有没有安装过:           yum ...

  8. 基于python实现的三方组件----Celery

    一.基于python实现的三方组件----Celery 1.作用 用于异步周期任务的处理 2.Celery的组成 (1)任务 app (2)记录任务的缓存(通常用redis或rabbitMQ) 任务记 ...

  9. 理解call(),apply(),bind()

    三者皆是修改this指向call(this指向,参数,参数,参数...) ====>深研究:https://developer.mozilla.org/zh-CN/docs/Web/JavaSc ...

  10. 第二章 python如何运行程序

    一.python解释器介绍 Python解释器是一种让程序运行起来的程序.实际上,解释器是代码与机器的计算机硬件之间的软件逻辑层.当Python包安装在机器上后,它包含了一些最小化的组件:一个解释器和 ...