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引入字体图标报错的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
asm.js使用示例代码
Nov 28 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
Jqprint实现页面打印
Jan 06 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
vue滚动插件better-scroll使用详解
Oct 18 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
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
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
animation和transition的区别
2020/10/12 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
终端业务员岗位职责
2013/11/27 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
简易离婚协议书范本
2014/10/24 职场文书
机关作风建设整改方案
2014/10/27 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android