webpack – 如何将Ionicons(或其他字体)导入Vue-loader应用程序？

2023年4月30日 540次阅读

在使用npm安装ionicons v3.0.0之后,我在将字体导入我的应用程序时遇到了很多麻烦：

// /src/App.vue
@import '../node_modules/ionicons/dist/scss/ionicons.scss';

似乎指向正确的道路,然而,我得到了很多错误,如

Cannot find module "../fonts/ionicons.eot?v=3.0.0-alpha.3

显然,这个问题源于字体文件,因为例如,上面的文件实际上是ionicons.eot,而不是ionicons.eot？v = 3.0.0-alpha.3.

我还发现了一个3-year old discussion on Github,并在评论中尝试了每一个加载器,但没有一个工作.我是Vue和webpack的新手,所以我不确定我做错了什么.

问题：为了能够使用vue-loader在我的应用中使用Ionicons(或Font Awesome或任何其他字体库)我需要做什么？

最佳答案 自己搞清楚了.您只需要为字体添加适当的加载器

{ test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: "file-loader" }

到您的webpack文件.但是,我还必须将@import语句从scss更改为已编译的css;否则,它将无法工作(不确定为什么).问题解决了

点赞