我曾尝试使用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...
发布于 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
然后你就可以使用字体了。
发布于 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包含到布局中。
发布于 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
复制相似问题