如何在Laravel Mix中安装Font Awesome
我曾尝试使用Laravel Mix安装Font Awesome，但在执行run npm dev时，我收到以下消息：
错误无法编译，出现%1个错误
错误。/~/font-awesome/scss/font-awesome.scss模块构建失败: /** ^ "...load the style“后的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...回答 13
Stack Overflow用户
发布于 2017-05-06 19:14:55
要安装font- with，你首先应该用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然后你就可以使用字体了。
Stack Overflow用户
发布于 2018-04-12 15:33:09
对于字体Awese5(带有css的webfont)，和Laravel混合为字体Awese5添加包
npm i --save @fortawesome/fontawesome-free并在app.scss中导入字体棒的scss或您的自定义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包含到布局中。
Stack Overflow用户
发布于 2018-04-08 18:06:52
如何在Laravel 5.3 - 5.6中安装Font Awese5(正确的方法)
构建您的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最后，在刀片模板/布局中引用生成的CSS文件。
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">如何在Laravel 8中安装Font Awese5和Laravel Mix 6(正确的方法)
https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621
https://stackoverflow.com/questions/43451509
复制相似问题