Laravelでnpmのfontawesome導入時に相対パスを対応した話

結論

• webpack.mix.js に mix.setResourceRoot('../'); を追記する。
• npm run prod を再実行する。
  • app.css から fortawesomeのfontの参照が相対パスになる

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/sass/app.scss', 'public/css');

// ★★★ fortawesomeの相対パス対応
mix.setResourceRoot('../');

if (mix.inProduction()) {
    mix.version();
}

環境

• Laravel 8.x
• FontAwesome 5.x

※ Laravelの他バージョンや、FontAwesome 6.x でも同様の修正で対応できるかと思います。

解説

Laravel-mix は webpack をラップしているのですが、webpackのデフォルトオプション processCssUrls: true が効いており、sassの url() をいい感じに書き換えています。
そのため、sass側でurl()の内容を修正するのではなく、Laravel-mix側で修正することで対応できました。

経緯

npmでfortawesome を導入しましたが、npm run prod で作成される app.css が 絶対パスでした。
そこを相対パスに変更したいと思いネット検索したのですが、対応記事になかなかたどりつけなかったため、記事化しました。
普段使わない sass + Laravel-mix(webpack) が絡んでおり、問題解決の記事にたどり着くまで時間がかかりました。
何かの参考になれば幸いｄ

参考リンク

• font awesome 5 - Laravel Mix Fontawesome - Stack Overflow

  • webpack.mix.js in your root folder:
    mix.setResourceRoot('../');

• 【CSSの相対URL】なんとなくでつけていたwebpack.mix.jsのオプションが仇となり...

  • processCssUrlsをtrueにしていると、webpackがcssとかの相対パスをいい感じに勝手に書き換えてくれるんですね。

  • default=true。これがsassのurl() を書き換えてた。

• Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。 #JavaScript - Qiita

• webpackとは？ #JavaScript - Qiita