宝哥软件园

Vue2.x中引入字体图标报错的解决方案

编辑:宝哥软件园 来源:互联网 时间:2021-08-29

基于vue-cli的项目平台

手写笔写的Css样式

有依赖css加载器的包x。

下图显示了webpack.base.conf.js中字体文件的配置

Vue2.x  引入字体图标

这里有人会有一个重复的字体文件配置,只是删除一个项目

问题:引入字体图标有问题

1.报告错误

Vue2.x  引入字体图标

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

相对路径

Vue2.x  引入字体图标

绝对路径

Vue2.x  引入字体图标

2.没有报告错误,但是字体图标显示为一个小框

有警告消息:

Vue2.x  引入字体图标

小方块:

Vue2.x  引入字体图标

由于重定向问题,报告了该错误

出现上述问题的原因

(1)没用的地方介绍字体样式文件

带后缀的文件。使用了styl

将字体文件夹移动到静态文件夹,使用绝对路径访问。此时可以使用styl文件

(1)解决办法是在使用的地方引入字体样式文件(如果是全局引入,需要从app.vue引入)

@ import文件路径’的解决方案是将font.styl改为font.css(手写笔预处理器的原因)

Vue2.x  引入字体图标

然后介绍它需要使用的地方

@import' file path' (3)将存储字体的字体文件夹移动到与src相同级别的静态文件夹中,然后使用绝对路径在icon.styl文件中访问它

Vue2.x  引入字体图标

通过在Vue2.x中引入带有@font-size的字体图标来解决报错问题,以上就是边肖分享的全部内容。希望能给大家一个参考,多支持我们。

更多资讯
游戏推荐
更多+