如何在 Laravel Mix 中安装 Font Awesome

Question

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

ERROR 编译失败，出现 1 个错误

./~/font-awesome/scss/font-awesome.scss 中的错误模块构建失败：/** ^ Invalid CSS after “…load the styles”: expected 1 selector or at-rule, is “var content = /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss 中的 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...

原文由 Lucas Lopes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Laravel 9 和 fontawesome 6.1

 composer create-project laravel/laravel:^9 laravel-9

cd laravel-9

npm i --save-dev @fortawesome/fontawesome-free@^6.1.0

创建文件 resources/sass/app.scss

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

将 webpack.mix.js 替换为

const mix = require('laravel-mix');

// set path to laravel public directory
//mix.setPublicPath('public');

// path to laravel public directory from public/css/app.css
mix.setResourceRoot("../");

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

添加到您的视图

<script src="{{ mix('js/app.js') }}"></script>
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />

注意：正确完成后，字体文件会自动复制到 public 目录。您不需要手动复制它们，如许多答案中所见。

注意：如果您的 laravel 站点位于子文件夹（http://domain/site/）中，请确保将 mix_url 添加到 config/app.php

     // laravel mix assets url
    'mix_url' => env('APP_URL', null),

原文由 8ctopus 发布，翻译遵循 CC BY-SA 4.0 许可协议