Laravel viteでBladeファイルを更新したらHot Reloadされるのに、CSSやJSを更新してもHot Reloadされない問題を解決する

この記事の目次

結論

vite.config.jsのrefreshをtrueではなく明示する。

plugins: [
    laravel({
        input: ['resources/css/app.css', 'resources/js/app.js'],
        refresh: [
            'app/Livewire/**',
            'app/View/Components/**',
            'lang/**',
            'resources/lang/**',
            'resources/views/**',
            'routes/**',
						
            // ↑ここまでが「refresh: true」の内容

           // ↓ここからが更新を明示したいファイル
            'resources/css/**',
            'resources/js/**',
        ],
    }),
],

このようにデフォルトではcssとjsの更新で、ページのリロードが走ることは想定されていません。
おそらくSPAなページが増えてきているからだと思います。

根拠

公式に書いてありました。

https://laravel.com/docs/12.x/vite#blade-refreshing-on-save

When your application is built using traditional server-side rendering with Blade, Vite can improve your development workflow by automatically refreshing the browser when you make changes to view files in your application. To get started, you can simply specify the refresh option as true.
When the refresh option is true, saving files in the following directories will trigger the browser to perform a full page refresh while you are running npm run dev:
app/Livewire/**
app/View/Components/**
lang/**
resources/lang/**
resources/views/**
routes/**

なので、cssやjsを更新した際にページをリロードしたければ明示してあげましょう。

[PR] おすすめの本