编程 Javascript

Vue2.x中利用@font-size引入字体图标报错的解决方法

Posted in Javascript onSeptember 28, 2018

利用 vue-cli 搭建的项目平台

利用stylus写的css样式

有 css-loader 依赖包x

下图是 webpack.base.conf.js 关于字体文件的配置

Vue2.x中利用@font-size引入字体图标报错的解决方法

有人这里会有重复的字体文件的配置，删除一项即可

出现的问题：引入字体图标出现问题

1.报错

Vue2.x中利用@font-size引入字体图标报错的解决方法

将字体引入的相对路径改成绝对路径

相对路径

Vue2.x中利用@font-size引入字体图标报错的解决方法

绝对路径

Vue2.x中利用@font-size引入字体图标报错的解决方法

2.不报错，但是出现的字体图标是小方框

有警告信息：

Vue2.x中利用@font-size引入字体图标报错的解决方法

小方块：

Vue2.x中利用@font-size引入字体图标报错的解决方法

报错是因为重定向的问题

出现上述问题的原因

①没在用到的地方引入字体的样式文件

②使用的是后缀名为 .styl 文件

③将font文件夹移动到static文件夹中，利用绝对路径访问，此时可以使用.styl文件

①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里引入）

@import '文件路径'

②的解决办法是把font.styl改为font.css（stylus预处理器的原因）

Vue2.x中利用@font-size引入字体图标报错的解决方法

然后再需要用到的地方引入

@import '文件路径'

③把存放字体的font文件夹移动到和src平级的static文件夹中，之后在icon.styl文件中用绝对路径访问

Vue2.x中利用@font-size引入字体图标报错的解决方法

以上这篇Vue2.x中利用@font-size引入字体图标报错的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

Vue2.x中利用@font-size引入字体图标报错的解决方法

- Author -

优雅1217

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

DOM精简教程

Oct 03 Javascript

16个最流行的JavaScript框架[推荐]

May 29 Javascript

扩展IE中一些不兼容的方法如contains、startWith等等

Jan 09 Javascript

一款基jquery超炫的动画导航菜单可响应单击事件

Nov 02 Javascript

Jquery实现$.fn.extend和$.extend函数

Apr 14 Javascript

js获取Get值的方法

Sep 29 Javascript

jQueryUI Datepicker组件设置日期高亮

Oct 13 Javascript

JavaScript随机生成颜色的方法

Oct 15 Javascript

探究JavaScript中的五种事件处理程序方式

Dec 07 Javascript

vue脚手架vue-cli的学习使用教程

Jun 06 Javascript

关于meta viewport中target-densitydpi属性详解（推荐）

Aug 18 Javascript

jQuery实现简单评论功能

Aug 19 jQuery

vue element table 表格请求后台排序的方法

Sep 28 #Javascript

webpack+vue-cli项目中引入外部非模块格式js的方法

Sep 28 #Javascript

在vue项目中正确使用iconfont的方法

Sep 28 #Javascript

vue项目引入字体.ttf的方法

Sep 28 #Javascript

vue打包相关细节整理(小结)

Sep 28 #Javascript

在vue-cli的组件模板里使用font-awesome的两种方法

Sep 28 #Javascript

Vue 第三方字体图标引入 Font Awesome的方法

Sep 28 #Javascript

You might like

PHP实现根据设备类型自动跳转相应页面的方法

2014/07/24 PHP

PHP实现自动登入google play下载app report的方法

2014/09/23 PHP

php常用字符串String函数实例总结【转换,替换,计算,截取,加密】

2016/12/07 PHP

PHP实现对数字分隔加千分号的方法

2019/03/18 PHP

PHP defined()函数的使用图文详解

2019/07/20 PHP

clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析

2010/03/12 Javascript

nodejs读取memcache示例分享

2014/01/02 NodeJs

js语法学习之判断一个对象是否为数组

2014/05/13 Javascript

JS小游戏之极速快跑源码详解

2014/09/25 Javascript

JS+CSS实现带关闭按钮DIV弹出窗口的方法

2015/02/27 Javascript

javascript简单实现滑动菜单效果的方法

2015/07/27 Javascript

js实现炫酷的左右轮播图

2017/01/18 Javascript

jQuery实现获取隐藏div高度的方法示例

2017/02/09 Javascript

vuejs使用axios异步访问时用get和post的实例讲解

2018/08/09 Javascript

vue-cli webpack配置文件分析

2019/05/20 Javascript

基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

2019/06/10 jQuery

ElementUI radio组件选中小改造

2019/08/12 Javascript

Openlayers学习之地图比例尺控件

2020/09/28 Javascript

解决vue项目axios每次请求session不一致的问题

2020/10/24 Javascript

如何构建一个Vue插件并生成npm包

2020/10/26 Javascript

vue实现动态表格提交参数动态生成控件的操作

2020/11/09 Javascript

[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2

2014/07/11 DOTA

python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件

2014/08/15 Python

用ReactJS和Python的Flask框架编写留言板的代码示例

2015/12/19 Python

Python数据结构之栈、队列的实现代码分享

2017/12/04 Python

python+matplotlib绘制简单的海豚（顶点和节点的操作）

2018/01/02 Python

在CentOS6上安装Python2.7的解决方法

2018/01/09 Python

简单分析python的类变量、实例变量

2019/08/23 Python

Python描述符descriptor使用原理解析

2020/03/21 Python

30行Python代码实现高分辨率图像导航的方法

2020/05/22 Python

2014年巴西世界杯口号

2014/06/05 职场文书

开发房地产协议书

2014/09/14 职场文书

审计局班子四风对照检查材料思想汇报

2014/10/07 职场文书

写给医院的感谢信

2015/01/22 职场文书

勤俭节约倡议书范文

2015/04/29 职场文书

spring项目中切面及AOP的使用方法

2021/06/26 Java/Android