Question

我已经创建了清晰的vue-cli webpack项目，通过npm安装了字体很棒。

然后在./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项目中导入字体很棒

1 个答案: