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が使えるようになります。
以上です。