在 vue-cli webpack 项目中导入 Font Awesome

Posted 2023-02-23

【中文标题】在 vue-cli webpack 项目中导入 Font Awesome

【英文标题】：Importing Font Awesome in vue-cli webpack project

【发布时间】：2018-05-10 11:50:20

【问题描述】：

我已经创建了清晰的 vue-cli webpack 项目，通过 npm 安装了 font-awesome。

然后在 ./assets/scss/styles.scss 中导入它 (@import '~font-awesome/scss/font-awesome.scss';)。

当我运行 npm start 时出现错误：

These relative modules were not found:

* ../fonts/fontawesome-webfont.eot in ./node_modules/css-loader?"sourceMap":false!./node_modules/postcss-loader/lib?"sourceMap":false!./node_modules/sass-loader/lib/loader.js?"sourceMap":false!./src/assets/scss/styles.
scss
* ../fonts/fontawesome-webfont.eot?v=4.7.0 in ./node_modules/css-loader?"sourceMap":false!./node_modules/postcss-loader/lib?"sourceMap":false!./node_modules/sass-loader/lib/loader.js?"sourceMap":false!./src/assets/scss
/styles.scss
* ../fonts/fontawesome-webfont.svg?v=4.7.0 in ./node_modules/css-loader?"sourceMap":false!./node_modules/postcss-loader/lib?"sourceMap":false!./node_modules/sass-loader/lib/loader.js?"sourceMap":false!./src/assets/scss
/styles.scss
* ../fonts/fontawesome-webfont.ttf?v=4.7.0 in ./node_modules/css-loader?"sourceMap":false!./node_modules/postcss-loader/lib?"sourceMap":false!./node_modules/sass-loader/lib/loader.js?"sourceMap":false!./src/assets/scss
/styles.scss
* ../fonts/fontawesome-webfont.woff2?v=4.7.0 in ./node_modules/css-loader?"sourceMap":false!./node_modules/postcss-loader/lib?"sourceMap":false!./node_modules/sass-loader/lib/loader.js?"sourceMap":false!./src/assets/sc
ss/styles.scss
* ../fonts/fontawesome-webfont.woff?v=4.7.0 in ./node_modules/css-loader?"sourceMap":false!./node_modules/postcss-loader/lib?"sourceMap":false!./node_modules/sass-loader/lib/loader.js?"sourceMap":false!./src/assets/scs
s/styles.scss

我该如何解决？谢谢！

【参考方案1】：

好的，这很容易解决。需要包括：

$fa-font-path: "~font-awesome/fonts";

正确的字体导入。

【讨论】：

这很有帮助。谢谢。

但“font-awesome”npm 存储库适用于 Font-Awesome v4。要将 Font-Awesome v5 与 npm 一起使用，请参阅 fontawesome.com/how-to-use/use-with-node-js