Vite + TailwindCSSで出たWarningを解決する方法

Laravel-mix -> vite移行作業中に以下のWarningに遭遇した

Vite build実行

vite build

Warning発生

/img/bg.jpg referenced in /my-project/resources/css/app.css didn't resolve at build time, it will remain unchanged to be resolved at runtime

とりあえず日本語訳してみた

「/my-project/resources/css/app.css」内で参照された「/img/bg.jpg」はビルド時に解決できず、ランタイムで解決されるままになります。

つまり、ビルドプロセス中に、/img/bg.jpgという画像ファイルを見つけることができなかったことを示しています。
その結果、アプリケーション実行時に動的に画像を探しに行って解決するような挙動になります。

原因

背景画像指定の際に、TailwindCSSのArbitrary values(任意の値)を使用していたことでした。

以下のように記述していました。

<div class="bg-[url('/img/bg.jpg')]">
  <!-- ... -->
</div>

TailwindCSSでは、bg-[任意の画像パス]という風にクラス名を記述することで、任意の画像を背景画像に指定することが可能です。
background image以外にも、この書き方は適応可能なので、随時調べてみてください。

解決策

画像パスのエイリアスを作成し、適用する

vite.config.js内には、各パスのエイリアスを記述できる部分があります。
そこに、画像パスのエイリアスを新規作成してください。

vite.config.js

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  // <-- 中略 -->
  resolve: {
    alias: {
      '@': path.resolve('resources/js'),
+     $image: path.resolve('public/img'),
    },
  },
});

そして、そのエイリアスを使って、TailwindCSSのクラスを下記のように書き換えてください。

- <div class="bg-[url('/img/bg.jpg')]">
+ <div class="bg-[url('$image/bg.jpg')]">
  <!-- ... -->
</div>

これで、再度ビルドし直すと、Warningが出ないようになっているはずです。

参考サイト