2021/07/01

laravel8+vueでfontawesomeを使う

laravel8でfontawesomeを使う方法がその前のバージョンと違うみたいなのですが、とりあえずlaravel8で使う方法をまとめます。

scssを使えるように設定する

webpack.mix.jsに下記を追加してscssに変更します。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css') //この行を追加
    .options({
        postCss: [
            require('postcss-import'),
            require('tailwindcss'),
        ]
    });

npmで色々インストールする。

fontawesomeとscssのコンパイルするパッケージをインストールします。
下記のコマンドでfontawesomeをインストールします。

npm install --save @fortawesome/fontawesome-free

次にscssコンパイル用のパッケージをインストールします。

新規にapp.scssを作成して参照を変更する。

「resources\sass\app.scss」を作成します。
※ デフォルトで作られている「resources/css/app.css」の参照から切り替わります。

@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';