引入iconfont图标报错

简介

这几天做毕设,需要用到iconfont图标,我使用的是uniapp+uview来做,但是呢使用uview自带的icon图标不行。

所以就打算引入阿里巴巴的iconfont图标。

不过在其中遇到一些问题。

其中的一些问题,我本人都不能说怎么解决的。

解决办法

解决报unexpected @ 错误

这个路径是报unexpected@

但是我不知道怎么解决的,很离谱

我就操作了这些

  1. 首先就是,我把iconfont文件下下来了,放在了static/iconfont文件夹中,

  2. 然后将iconfont.css文件的src中的url换成了在线的

在线链接查看方式:

  1. 然后在需要使用的组件的style中引入iconfont.css

注意:引入方式两种都可以,但是官方推荐使用~@这种形式。

这个时候,其实应该就可以了(我猜测),后面我把其他操作删除了,但是没有这个报错。

(后面的是我当时的操作,问题应该都解决了。)如果没有的话,可以把我这些步骤都来一下

但这个时候,我打开微信开发者工具还是有这个报错,嗯,就又去网上冲浪了。

比如:

  • 在index.html中引入iconfont.css,不在当前组件总引入。
  • 把app.vue中的引入scss的方式删除掉。

但是没有效果,然后,我就把软件关了(其实,之前我就关了很多次),这次奇迹发生了,没有报错了。

解决渲染层错误

报错信息是这样的

然后又是在网上冲浪,嘿嘿,又被我找到了,刚刚我们在做这一步操作时,没有添加完成:

就是这个:将iconfont.css文件的src中的url换成了在线的。

我们需要把每个url开头加上: https: