如何在Laravel Mix中安装真棒字体

PHP Webpack

番长十三

2020-03-23

我尝试使用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...

第3117篇《如何在Laravel Mix中安装真棒字体》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
樱 2020.03.23 
npm install font-awesome --save

在路径之前添加〜/ 

@import "~/font-awesome/scss/font-awesome.scss";
Gil 2020.03.23

我最近为Laravel5.6撰写了有关它的博客。链接到博客是https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574

步骤类似于以上描述。但就我而言，我不得不做一些额外的步骤，例如在“ public”目录中将webfonts路径配置为font-awesome。在Laravel mix等中设置资源根。您可以在博客中找到详细信息。

我将链接留在这里，以便为那些无法解决上述问题的人们提供帮助。

泡芙Pro 2020.03.23

要安装真棒字体，您首先应该使用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

然后可以使用字体。

Gil 2020.03.23

对于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）

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android