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

2020/10/28 00:41 · php ·  · 0评论

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

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

然后可以使用字体。

对于Font Awesome 5(带有CSS的Webfont)Laravel mixin,添加字体Awesome 5

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 devnpm run production将已编译的CSS纳入布局

如何在Laravel 5.3-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之类的软件包管理器来安装Font Awesome的最新免费版本

npm install @fortawesome/fontawesome-free

现在,此依赖项条目应位于您的package.json中

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",

在您的主要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

最后,在Blade模板/布局中引用生成的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">

对于Laravel> = 5.5

  • npm install font-awesome --save
  • 添加@import "~font-awesome/scss/font-awesome.scss";resources/assets/saas/app.scss
  • 运行npm run devnpm 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";

您使用的路径不正确,您可以打开node_module并找到font-awesome的路径。使用可以使用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');

最后只运行脚本
npm run devnpm run watch在laravel中

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

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

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

首先使用npm安装fontawsome

npm install --save @fortawesome/fontawesome-free

添加 resources\sass\app.scss

// Fonts
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

并添加到 resources\js\app.js

require('@fortawesome/fontawesome-free/js/all.js');

然后跑

npm run dev

要么

npm run production
npm install font-awesome --save

在路径之前添加〜/

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

Laravel 7的解决方案

  1. 安装真棒字体库。
npm install font-awesome --save
  1. 安装库之后。打开以下文件并粘贴给定的代码

<you_project_location> /resources/sass/app.scss

@import "~font-awesome/scss/font-awesome";
  1. 打开以下文件并粘贴给定的代码

<you_project_location> /webpack.mix.js

mix.setResourceRoot("../");
  1. 根据您的环境执行命令。

npm run dev

要么

npm运行生产

无需将字体文件夹复制并粘贴到公用文件夹中,都可以自动处理。

我发现上面的所有答案都以某种方式不完整,下面是使其正常工作的确切步骤。

  1. 我们使用npm来安装软件包。为此,请打开控制台并转到您的Laravel应用程序目录。输入以下内容:

    npm install font-awesome --save-dev

  2. 现在,我们必须将所需的文件复制到public / css和public / fonts目录。为此,请打开webpack.mix.js文件并添加以下内容:

    mix.copy('node_modules/font-awesome/css/font-awesome.min.css', 'public/css'); mix.copy('node_modules/font-awesome/fonts/*', 'public/fonts');

  3. 运行以下命令以执行Laravel Mix:

    npm run dev

  4. 在您的应用程序布局文件(resources / views / layouts / app.blade.phpapp.blade.php)中添加Font Awesome的样式表:

    <link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />

  5. 在模板中使用真棒字体图标

    <i class="fa fa-address-book" aria-hidden="true"></i>

希望对您有所帮助!

尝试在webpack.mix.js中添加“ *”

.copy('node_modules/font-awesome/fonts/*', 'public/fonts')
本文地址:http://php.askforanswer.com/ruhezailaravel-mixzhonganzhuangzhenbangziti.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!