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

執筆日: 更新日:
この記事の目次

結論

vite.config.jsrefreshtrueではなく明示する。

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] おすすめの本

Nな人

この記事を書いた人

Nな人(えぬなひと)

Laravelが大好きなPHPerで、WEBを作るときはLaravelを技術スタックに絶対推すマン。 PHP、Pythonと、昔はperlを書いていたP言語エンジニア。 最近はNimを書いたりしています。