web-dev-qa-db-ja.com

Laravel MixにFont Awesomeをインストールする方法

Laravel Mixを使用してFont Awesomeをインストールしようとしましたが、run npm devを実行すると次のメッセージが表示されます。

エラー1つのエラーでコンパイルに失敗しました
[。 /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...
phplaravellaravel-5webpacklaravel-mix
45
Lucas Lopes

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

そして、フォントを使用できます。

81
Kornel

ForFont Awesome 5（css付きwebfont）およびLaravel mixinパッケージを追加素晴らしいフォント5

npm i --save @fortawesome/fontawesome-free

そして、インポートfont awesome scssapp.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をレイアウトに含める

55
Karan

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などのパッケージマネージャーからFont Awesomeの最新の無料バージョンをインストールします。

npm install @fortawesome/fontawesome-free

これで、この依存関係エントリはpackage.jsonにあるはずです。

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

メインSCSSファイル/resources/sass/app.scssで、1つ以上のスタイルをインポートします。

@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') }}">
35
Karl Hill

これは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">
21
Ramesh Navi

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）を実行します
15
rap-2-h

使用しているパスが正しくないため、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を実行します

3
Farshad Fahimi

私は最近、Laravel5.6用のブログを書いています。ブログへのリンクは https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574

手順は上記の説明と同様です。しかし、私の場合、「public」ディレクトリでfont-awesomeへのwebfontsパスを設定するなどの追加の手順を実行する必要がありました。 Laravel mixなどでリソースルートを設定します。詳細はブログで確認できます。

ここにリンクを残しているので、言及されたソリューションが機能しない人々のために役立ちます。

3
Samundra
npm install font-awesome --save

パスの前に〜/を追加します

@import "~/font-awesome/scss/font-awesome.scss";
2
Vahid Alvandi

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";
2
Hyder B.