如何在Laravel Mix中安装Font Awesome

php webpack laravel laravel-5 laravel-mix

2022-08-30 08:18:59

我尝试使用Laravel Mix安装Font Awesome，但在执行时，我收到以下消息：run npm dev

错误编译失败，在 ./~/font-awesome/scss/font-awesome.scss 模块构建失败时出现 1 个错误
错误： /** ^ “...加载样式“：预期的 1 个选择器或 at-rule，是 /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss 中的”var content = requi“（第 1 行，第 1 列）

我删除了文件中的注释并尝试更改字体路径，但这并没有解决问题。

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .copy('node_modules/font-awesome/fonts/', 'public/fonts')
   .sass('node_modules/font-awesome/scss/font-awesome.scss', 'public/css')
   .version();

fontawesome.scss

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";

_variable.scss

// Variables
// --------------------------

$fa-font-path:        "../fonts" !default;
$fa-font-size-base:   14px !default;
$fa-line-height-base: 1 !default;
// $fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix:       fa !default;
$fa-version:          "4.7.0" !default;
$fa-border-color:     #eee !default;
$fa-inverse:          #fff !default;
$fa-li-width:         (30em / 14) !default;
// Continue...

答案 1

要安装font-awesome，您首先应该使用npm安装它。因此，在项目根目录类型中：

npm install font-awesome --save

（当然，我假设你已经安装了node.js和npm。并且您已经在项目根目录中完成了npm安装）

然后编辑该文件并在顶部添加以下行：resources/assets/sass/app.scss

@import "node_modules/font-awesome/scss/font-awesome.scss";

现在你可以做例如：

npm run dev

这会在正确的文件夹中构建资源的未被破坏版本。如果你想缩小它们，你可以运行：

npm run production

然后你可以使用字体。

答案 2

对于Font Awesome 5（webfont with css）和Laravel mixin添加字体真棒的软件包5

npm i --save @fortawesome/fontawesome-free

并在app.scss或您的自定义scss文件中导入字体真棒ss

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

编译你的资产 npm run dev 或 npm run production，并将你编译的 css 包含在布局中