如何在 Laravel Mix 中安装 Font Awesome

Posted 2023-02-19

【中文标题】如何在 Laravel Mix 中安装 Font Awesome

【英文标题】：How to Install Font Awesome in Laravel Mix

【发布时间】：2017-09-13 01:45:04

【问题描述】：

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

ERROR 编译失败，出现 1 个错误 ./~/font-awesome/scss/font-awesome.scss 模块构建中的错误 failed: /** ^ Invalid CSS after "...load the styles": expected 1 选择器或规则，是“var content = requi” /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss （第 1 行，第 1 列）

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

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...

【问题讨论】：

请考虑奖励答案。

注意问题中的mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');部分。

【参考方案1】：

要安装 font-awesome，您首先应该使用 npm 安装它。所以在你的项目根目录中输入：

npm install font-awesome --save

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

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

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

现在你可以做例如：

npm run dev

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

npm run production

然后你就可以使用字体了。

【讨论】：

在 Laravel 5.5 中，这对我有用：@import "~font-awesome/scss/font-awesome.scss";

我应该说这对我有帮助，因为我忘记更新 app.scss 文件但 url 已更改，在我的情况下是 @import "node_modules/font-awesome-sass/assets/stylesheets/_font-awesome.scss";

yarn 比npm 快得多，所以你可以做到yarn add font-awesome --save

有一次我遇到了 fontawesome 的问题。全部尝试，下载，安装npm。但后来发现问题前端开发人员在 css * 中为每个标签编写了一个代码，我删除了该代码，然后 fontawesome 完美运行

请注意，这不会安装最新的免费版 Font Awesome。它只会安装版本+ font-awesome@4.7.0。

【参考方案2】：

对于 Font Awesome 5(webfont with css) 和 Laravel mixin 为 font awesome 5 添加包

npm i --save @fortawesome/fontawesome-free

并在 app.scss 或您的自定义 scss 文件中导入 font awesome scss

@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包含到布局中

【讨论】：

谢谢，它几乎对我有用。我所要做的就是更改行的顺序并将@import '~@fortawesome/fontawesome-free/scss/fontawesome'; 移动到 font-awesome 导入的顶部。

点赞！你真的需要所有这 4 个文件吗？我认为 ~@fortawesome/fontawesome-free/scss/fontawesome 就足够了

【参考方案3】：

如何在 Laravel 5.3 - 5.6 中安装 Font Awesome 5（正确的方式）

构建您的 webpack.mix.js 配置。

mix.setPublicPath('public');
mix.setResourceRoot('../');

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

通过像 npm 这样的包管理器安装最新的免费版Font Awesome。

npm install @fortawesome/fontawesome-free --save-dev

此依赖项现在应该在您的package.json 中。

// Font Awesome
"devDependencies": 
    "@fortawesome/fontawesome-free": "^5.15.3",

在您的主 SCSS 文件 /resources/assets/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';

编译您的资产并生成一个缩小的、可用于生产的构建。

npm run production

最后，在 Blade 模板/布局中引用生成的 CSS 文件。

<link type="text/css" rel="stylesheet" href=" mix('css/app.css') ">

如何在 Laravel 8 中使用 Laravel Mix 6 安装 Font Awesome 5（正确方式）

https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621

【讨论】：

我还必须在 /resources/assets/sass/app.scss 中包含 CSS（前缀为 @）： import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";导入“~@fortawesome/fontawesome-free/scss/solid.scss”；

如果不将 .copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts') 添加到我的 webpack.mix.js 中，我无法让它工作

这里也一样，我必须将 webfonts 复制到公共，否则我会收到一个 404 not found 错误，指的是 webfonts 文件夹。我认为应该更新答案。

在 laravel 7.4 中，webpack 配置已经构建，因此我只需 npm 命令，然后添加到 scss 文件，然后运行 ​​npm run whatver-you-want-here 即可完成

【参考方案4】：

这适用于使用 Laravel 5.7（及更高版本）和 Fontawesome 5.3 的新用户

npm install @fortawesome/fontawesome-free --save

在 app.scss 中

@import '~@fortawesome/fontawesome-free/css/all.min.css';

运行

npm run watch

在布局中使用

<link href=" asset('css/app.css') " rel="stylesheet">

【讨论】：

这应该在顶部，因为 laravel 5.7 是当前的稳定版本。我已经尝试了上述所有技巧，但除了这个之外，没有其他方法对我有用。我所缺少的只是放在我的标题中的链接部分。非常感谢！ :)

这应该被接受，因为其他答案只适用于旧版本的 laravel

尝试使用此方法加载字体时仍会收到/webfonts/fa-solid-900.woff2 net::ERR_ABORTED 404。在页面上呈现图标的代码是什么样的？

我还不得不在 webpack.mix.js 中复制字体 .copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts')

这适用于最新版本的 FA 和 Laravel 5.5，谢谢！

【参考方案5】：

对于 Laravel >= 5.5

运行npm install font-awesome --save 在resources/assets/saas/app.scss 中添加@import "~font-awesome/scss/font-awesome.scss"; 运行npm run dev（或npm run watch，甚至npm run production）

【参考方案6】：

我使用的是 Laravel 5.5.14，但上述方法都不适合我。下面是我为使其工作而采取的步骤。

1.使用npm安装font-awesome：

   npm install font-awesome --save

2.通过在您的webpack.mixin.js 中添加这一行来将字体移动到您的公共目录

mix.copyDirectory('node_modules/font-awesome/fonts', 'public/fonts/font-awesome');

3.打开你的 app.scss 指定你的 node_modules 中字体的路径以及编译使用的相对路径：

$fa-font-path: "../fonts/font-awesome" !default;
@import "~font-awesome/scss/font-awesome.scss";

【讨论】：

$fa-font-path: "../../../public/fonts/font-awesome" !default; 这将起作用，因为我们将提供字体目录的相对路径。

为什么我们不能在这里使用绝对路径，例如"/fonts/font-awesome" !default; ?

请注意，这不会安装最新的免费版 Font Awesome。它只会安装版本+ font-awesome@4.7.0。

【参考方案7】：

您使用的路径不正确，您可以打开 node_module 并找到 font-awesome 的路径。 use 可以使用 js 或 svg 字体，但我更喜欢 css 样式。

首先使用这个命令安装font-awesome-free npm install --save-dev @fortawesome/fontawesome-free

之后你就可以这样做了

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

我复制下面的字体路径这是可选的

.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/fonts');

最后只运行脚本 npm run dev 或 npm run watch 在 laravel 中

【参考方案8】：

首先使用npm安装fontawsome

npm install --save @fortawesome/fontawesome-free

添加到resources\sass\app.scss

// Fonts
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

并添加到resources\js\app.js

require('@fortawesome/fontawesome-free/js/all.js');

然后运行

npm run dev

或

npm run production

【参考方案9】：

Laravel 7 解决方案

安装 font-awesome 库。

npm install font-awesome --save

安装库后。打开以下文件并粘贴给定的代码

/resources/sass/app.scss

@import "~font-awesome/scss/font-awesome";

打开以下文件并粘贴给定代码

/webpack.mix.js

mix.setResourceRoot("../");

根据您的环境执行命令。

npm 运行开发

或

npm 运行生产

字体文件夹无需复制粘贴到公用文件夹，全部自动处理。

【讨论】：

note mix.setResourceRoot("../"); 在这个答案中，非常有用。

mix.setResourceRoot("../"); 很有魅力！谢谢

这应该被接受，因为它适用于最新版本的 Laravel，今天刚刚进行了全新安装。 mix.setResourceRoot("../"); 是救命稻草！ @abenevaut 和 @Emad Saeed 应该投票赞成这个答案

【参考方案10】：

我最近为 Laravel5.6 写了一篇关于它的博客。博客链接是https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574

步骤与上述类似。但就我而言，我必须做一些额外的步骤，比如在“public”目录中配置 webfonts 路径到 font-awesome。在 Laravel mix 等中设置资源根目录，具体可以参考博客。

我将链接留在此处，以便对上述解决方案不起作用的人有所帮助。

【讨论】：

谢谢，我尝试了几乎所有其他提供的答案，只有这样解决了我的问题。

【参考方案11】：

npm install font-awesome --save

在路径前添加~/

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

【讨论】：

以前工作过，现在出错了。这修复了它：@import "~font-awesome/scss/font-awesome";

【参考方案12】：

我发现上面的所有答案都不完整，下面是让它工作的确切步骤。

我们使用 npm 来安装软件包。为此，请打开控制台并转到您的 Laravel 应用程序目录。输入以下内容：

npm install font-awesome --save-dev

现在我们必须将需要的文件复制到 public/css 和 public/fonts 目录。为此，请打开 webpack.mix.js 文件并添加以下内容：

mix.copy('node_modules/font-awesome/css/font-awesome.min.css', 'public/css'); mix.copy('node_modules/font-awesome/fonts/*', 'public/fonts');

运行以下命令以执行 Laravel Mix：

npm run dev

在您的应用程序布局文件 (resources/views/layouts/app.blade.phpapp.blade.php) 中添加 Font Awesome 的样式表：

<link href=" asset('css/font-awesome.min.css') " rel="stylesheet" />

在模板中使用很棒的字体图标

<i class="fa fa-address-book" aria-hidden="true"></i>

希望对你有帮助！

【参考方案13】：

尝试在您的 webpack.mix.js 中添加“*”

.copy('node_modules/font-awesome/fonts/*', 'public/fonts')

【讨论】：

我不是 scss 专家，但它似乎询问从哪里导入。从 fontawasome 网站本身，您可能需要在第 1 行添加 @fa-font-path: "../font"; It has to be a relative path so in laravel it will probable be "../../../public/font"

复制没问题，但我觉得将.scss文件导入font-awesome里面的app.scss效果更好。

谢谢，我认为这应该被选为最佳答案。