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

Question

我已经创建了清晰的 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

我该如何解决？谢谢！

Answer 1

好的，这是一个简单的修复。需要包括：

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

正确导入字体。

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

Importing Font Awesome in vue-cli webpack project

sass

webpack-2

vue-cli