Question

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

错误编译失败1次 ./~/font-awesome/scss/font-awesome.scss中的错误模块构建失败：/ ** ^“加载样式”后的CSS无效：预期1 选择器或规则，是“var content = requi”in /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();

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

Answer 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

然后你可以使用字体。

Answer 2

对于 Font 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 run dev 或 npm run production ，并将已编译的css包含在布局中

Answer 3

适用于Laravel 5.6和Font Awesome 5

构建webpack.mix.js配置。

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

安装Font Awesome。

npm install @fortawesome/fontawesome-free

这一行现在应该在你的package.json中。

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.8.2",

在/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';

让我们编译所有资产并生成生产就绪的构建。

npm run production

最后，在布局中引用新的CSS文件。

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

Answer 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">

Answer 5

对于Laravel＆gt; = 5.5

运行npm install font-awesome --save
在@import "~font-awesome/scss/font-awesome.scss";

resources/assets/saas/app.scss

运行npm run dev（或npm run watch甚至npm run production）

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

Answer 7

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

这些步骤类似于上面的描述。但在我的情况下，我不得不做额外的步骤，例如在＆＃34; public＆＃34;中配置webfonts路径到font-awesome。目录。在Laravel mix等中设置资源根目录。您可以在博客中找到详细信息。

我要离开这里的链接，这样可以帮助那些提到的解决方案无法解决的人。

Answer 8

首先使用fontawsome安装npm

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

Answer 9

npm install font-awesome --save

在路径

之前添加〜/

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

Answer 10

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

首先使用此命令安装无字体真棒 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');

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

Answer 11

Laravel 7解决方案

安装真棒字体库。

npm install font-awesome --save

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

/resources/sass/app.scss

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

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

/webpack.mix.js

mix.setResourceRoot("../");

根据您的环境执行命令。

npm run dev

或

npm运行生产

无需将字体文件夹复制并粘贴到公用文件夹中，一切都会自动处理。

Answer 12

尝试使用您的webpack.mix.js添加＆＃39; *＆＃39;

SqlDataReader

Answer 13

我发现以上所有答案均不完整，以下是使其正常工作的确切步骤。

我们使用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>

希望对您有帮助！

如何在Laravel Mix中安装Font Awesome

13 个答案:

对于Laravel＆gt; = 5.5