Php 如何在Laravel Mix中安装Font Awesome

我曾尝试使用Laravel Mix安装Font Awesome，但在执行

运行npm dev

时，我收到以下消息：

编译错误失败，有1个错误
./~/font awesome/scss/font-awesome.scss模块生成中出错 失败：/***在“…加载样式”之后的CSS无效：应为1 选择器或at规则中的“var content=requi” /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss （第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();

@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";

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

fontsawesome.scss

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();

@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";

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

\u variable.scss

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();

@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";

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

---

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

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

---

要安装FontAwesome，您首先应该使用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

然后，您可以使用字体。

表示Laravel>=5.5

• 运行

  npm安装字体-保存
  

• 添加

  @import“~font-awesome/scss/font-awesome.scss”在
  资源/资产/saas/app.scss

• 运行

  npm运行开发

  （或

  npm运行监视

  甚至

  npm运行生产

  ）

---

我使用的是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.scs以指定节点_模块中字体的路径以及用于编译的相对路径：

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

如何在Laravel5.3-5.6中安装FontAwesome5（正确的方法） 构建您的配置

mix.setResourceRoot("../");

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

通过包管理器（如npm）安装的最新免费版本

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

这个依赖项现在应该在您的应用程序中

在主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

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

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

如何在Laravel8中使用LaravelMix6安装FontAwesome5（正确的方法） 对于字体Awesome 5（带有css的webfont）和Laravel mixin为字体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运行开发
或
npm运行生产
，并将编译后的css包含到布局中
我最近为Laravel5.6写了一篇关于它的博客。链接到博客是

步骤与上述描述类似。但在我的例子中，我必须执行额外的步骤，比如将webfonts路径配置为“public”目录中的font awesome。在Laravel mix中设置资源根目录等。您可以在博客中找到详细信息

我把这个链接留在这里，这样可以帮助那些上述解决方案不起作用的人

npm install font-awesome --save

在路径之前添加~/

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

这适用于正在使用Laravel 5.7（及以上）和Fontawesome 5.3的新用户

npm install @fortawesome/fontawesome-free --save

和app.scss中

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

跑

在布局中使用

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

您使用的路径不正确。您只需打开node_模块，找到font awesome的路径即可。
use可以使用js或svg字体，但我更喜欢css样式

首先使用此命令安装免费字体
npm安装--免费保存dev@fortwome/fontwome

在那之后你可以做这个

@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中
首先使用

添加到
resources\sass\app.scss

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

并添加到
resources\js\app.js

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

require（'@fortawesome/fontawesome-free/js/all.js'）；

然后跑

npm run dev

或

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

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

npm安装字体-保存开发


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

mix.copy（'node_modules/font-awesome/css/font-awesome.min.css'，'public/css'）；mix.copy（'node_modules/font-awesome/font/*'，'public/font'）


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

npm运行开发人员


在应用程序布局文件（参考资料/views/layouts/app.blade.phpapp.blade.php）中添加字体Awesome的样式表：



在模板中使用字体图标，如



我希望有帮助
 针对Laravel 7的解决方案

安装字体库
安装库之后。打开以下文件并粘贴给定代码
/资源/sass/app.scss

打开以下文件并粘贴给定代码
/webpack.mix.js

根据您的环境执行命令
npm运行开发

或

npm运行生产

无需将字体文件夹复制粘贴到公用文件夹，所有操作都将自动处理。
我不是scss专家，但它似乎会询问从何处导入。从fontawasome站点本身，您可能必须在第1行添加