无法使用 laravel/mix 加载 fontawesome - webpack

Question

我正在尝试在 laravel 项目中使用 npm 包管理器和 webpack 加载很棒的字体。

我尝试了许多使用/不使用 $fa-font-path 的解决方案，但它们都不起作用。

我试过了：

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

 @import "~@fortawesome";

也有/没有~符号。

每次在public/fonts/vendor/@fortawesome/fontawesome-free/webfonts/上生成字体文件

好像在考虑默认字体路径：$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

另一个问题是它总是寻找/css/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff这条路径。我不知道为什么它在 css 中添加~。我相信它的$fa-font-path 设置在 fontawesome _variable 库中。而生成的目录是@fortawesome 没有~

所以我需要在这里解决两个问题： 1) 修复 laravel mix webpack 中的路径 2) 从路径中删除前缀 ~ 符号并使 $fa-font-path 工作

Answer 1

在/resources/sass/app.scss 添加...

// Fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

您不需要：$fa-font-path。 ~ 引用 /node_modules 目录。