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

这篇文章主要为大家详细介绍了Vue2.x中利用@font-size引入字体图标报错的解决方法，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

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

利用stylus写的css样式

有 css-loader 依赖包x

 

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

 

【图片暂缺】

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

 

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

 

 

1.报错

 

【图片暂缺】

 

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

 

相对路径

【图片暂缺】

绝对路径

【图片暂缺】

 

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

 

有警告信息：

【图片暂缺】

小方块：

【图片暂缺】

报错是因为重定向的问题

 

出现上述问题的原因

 

 

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

 

 

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

 

 

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

 

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

代码如下：

@import '文件路径'

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

【图片暂缺】

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

代码如下：

@import '文件路径'

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

【图片暂缺】

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

本文来自：http://www.q1010.com/184/6028-0.html

注：关于Vue2.x中利用@font-size引入字体图标报错的解决方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js