如何在Laravel Mix中安装Font Awesome

Question

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

错误在./~/font-awesome/scss/font-awesome.scss中编译时出现1错误错误.模块构建失败:/**^"加载样式"后的无效CSS:预期的1个选择器或at-规则是/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...

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添加字体真棒5的包

npm i --save @fortawesome/fontawesome-free

并在app.scss或您的自定义scss文件中导入字体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');

安装字体真棒.

npm install @fortawesome/fontawesome-free

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

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.11.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> = 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

首先使用npm安装fontawsome

npm install --save @fortawesome/fontawesome-free

添加resources\sass\app.scss

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

并添加到resources\js\app.js

npm install --save @fortawesome/fontawesome-free

然后运行

npm run dev

或者

npm run production

Answer 8

Laravel 7 的解决方案

1. 安装很棒的字体库。

npm install font-awesome --save

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

<you_project_location>/resources/sass/app.scss

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

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

<you_project_location>/webpack.mix.js

mix.setResourceRoot("../");

4. 根据您的环境执行命令。

npm 运行开发

或者

npm 运行生产

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

Answer 9

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为

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

添加到您的视图

<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

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

Answer 10

尝试在 webpack.mix.js 中添加 '*'

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