4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Laravel8]Font Awesomeのインストール方法

Last updated at Posted at 2020-10-11

Laravel8でJetstreamになってから、それまでの方法ではFont Awesomeがインストールできなくなりました。
以下の手順で実装することができたのでシェアします。(環境:XAMPP)

1: webpack.mix.jsの内容が、デフォルトで以下の通りになっています。

webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

↓↓ 上記のコードを以下のように変更してください。

webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require('postcss-import'),
            require('tailwindcss'),
        ]
    });

2: ターミナルで以下の通りコマンドを打って、Font Awesomeをインストールします。(以下は無料バージョンの場合です。)

npm install --save @fortawesome/fontawesome-free

3: 『resources\sass\app.scss』に新規ファイルを作ります。ファイルに以下の通り追記して、インポートします。
(※ デフォルトで作られている『resources/css/app.css』は使用しません。)

resources\sass\app.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

最後の4行は、ご自身で必要な分をインポートしてください。

4: ビルドします。

npm install && npm run dev

これで、public\css\app.cssにコンパイルされてFont Awesomeが使えるようになります。

以上です。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?