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

こんにちは。お久しぶりです。

webpackは複雑だから...と、ネット上にある設定をパクって、webpack.mix.jsの設定をしていたら事故が起こりました。
ちゃんと理解して設定しないといけないですね。

事故が起こったwebpackのオプション

今回事故が起こった元となったオプションは processCssUrlsです。

僕は下記のように設定していました。

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .options({
      processCssUrls: false,
      postCss: [ tailwindcss('./tailwind.config.js') ],
    })
    .version();

起こった事故の内容

mavon-editorというjsのライブラリでマークダウンエディターを実装していたら、
なんとフォントが全く表示されないではありませんか。。。
オーマイ。

URLを見たら、

http://127.0.0.1/hogehoge/hugahuga/fontello.ttlのように、変なところにfontを見に行っている...。

そして、ライブラリのcssの中身を見たら、下記のように相対URLで記されています。

@font-face{
    font-family:fontello;
    src:url(../font/fontello.eot);
    src:url(../font/fontello.eot#iefix) format("embedded-opentype"),
        url(../font/fontello.woff2) format("woff2"),
        url(../font/fontello.woff) format("woff"),
        url(../font/fontello.ttf) format("truetype"),
        url(../font/fontello.svg#fontello) format("svg");
    font-weight:400;font-style:normal
}

あ〜、こりゃ大変だ...

解決策

webpack.mix.jsの processCssUrls をtrueにしてあげればOKでした

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .options({
      processCssUrls: true, // ← ここ
      postCss: [ tailwindcss('./tailwind.config.js') ],
    })
    .version();

processCssUrlsをtrueにしていると、webpackがcssとかの相対パスをいい感じに勝手に書き換えてくれるんですね。
初期値はtrueのはずなので、こんなことに引っかかる人はいないと思いますが、
つまづいたらなかなか出られなさそうな罠なので、記しておきたいと思います。

では、また！