我尝试使用Laravel Mix安装Font Awesome,但在执行run npm dev
时,我收到以下消息:
错误无法编译,出现1个错误 ./~/font-awesome/scss/font-awesome.scss中的错误模块构建失败:/ ** ^“加载样式”后的无效CSS:预期的1个选择器或at-rule,是“var content = requi“in /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss(line 1,column 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...
要安装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
然后你可以使用该字体。
尝试在你的webpack.mix.js中添加'*'
.copy('node_modules/font-awesome/fonts/*', 'public/fonts')
对于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包含在布局中
对于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.9.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';
让我们编译所有资产并生成生产就绪的构建。
npm run production
最后,在布局中引用新的CSS文件。
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
这适用于使用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">
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
)我正在使用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";
我最近为Laravel5.6写了一篇关于它的博客。链接到博客是https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574
这些步骤类似于上面的描述。但在我的情况下,我不得不做一些额外的步骤,比如在“public”目录中配置webfonts路径到font-awesome。在Laravel mix等中设置资源根目录。您可以在博客中找到详细信息。
我将链接留在这里,以帮助所提到的解决方案不起作用的人。
您正在使用的路径不正确您只需打开node_module并找到font-awesome的路径。 use可以使用js或svg字体,但我更喜欢css样式。
首先使用此命令安装font-awesome-free 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
npm install font-awesome --save
在路径前添加〜/
@import "~/font-awesome/scss/font-awesome.scss";