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

基于vue-cli的项目平台

手写笔写的Css样式

有依赖css加载器的包x。

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

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

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

1.报告错误

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

相对路径

绝对路径

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

有警告消息：

小方块：

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

出现上述问题的原因

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

带后缀的文件。使用了styl

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

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

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

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

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

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