如何在 Laravel Mix 中安装 Font Awesome

How to Install Font Awesome in Laravel Mix(如何在 Laravel Mix 中安装 Font Awesome)

问题描述

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

I've tried to install Font Awesome using Laravel Mix but when executing run npm dev I get the following message:

ERROR 编译失败，出现 1 个错误
./~/font-awesome/scss/font-awesome.scss 模块构建中的错误失败:/** ^ ...加载样式"后无效的 CSS:预期为 1选择器或规则，是var content = requi"/var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss(第 1 行，第 1 列)

ERROR Failed to compile with 1 errors
error in ./~/font-awesome/scss/font-awesome.scss Module build failed: /** ^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss (line 1, column 1)

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

I removed the comments in the file and tried to change font paths, but it did not solve the problem.

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

推荐答案

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

To install font-awesome you first should install it with npm. So in your project root directory type:

npm install font-awesome --save

(当然我假设你已经安装了 node.js 和 npm.并且你已经在你的项目根目录中完成了 npm install)

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

Then edit the resources/assets/sass/app.scss file and add at the top this line:

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

现在你可以做例如:

npm run dev

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

This builds unminified versions of the resources in the correct folders. If you wanted to minify them, you would instead run:

npm run production

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

And then you can use the font.

这篇关于如何在 Laravel Mix 中安装 Font Awesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！