如何将 Ionicons（或其他字体）导入 Vue-loader 应用程序？答案

【问题标题】：How to import Ionicons (or other fonts) into a Vue-loader app?如何将 Ionicons（或其他字体）导入 Vue-loader 应用程序？
【发布时间】：2017-11-09 13:39:19
【问题描述】：

在使用 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 并尝试了 cmets 中建议的每个加载程序，但没有一个有效。我是 Vue 和 webpack 的新手，所以我不确定自己做错了什么。

问题：我需要做什么才能通过 vue-loader 在我的应用中使用 Ionicons（或 Font Awesome 或任何其他字体库）？

【问题讨论】：

标签： webpack vue-loader ionicons

【解决方案1】：

我自己想出来的。您只需要为字体添加适当的加载器

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

到您的webpack 文件。但是，我还必须将 @import 语句从 scss 更改为已编译的 css；否则，它不会工作（不知道为什么）。问题解决了

【讨论】：