【Laravel】Vite 使用時に、npm run dev で css が反映されないとき

Laravel Mix から、Vite への移行にともない、フロント側のコンパイルの仕様が変更になり、コンパイルの呼び出しコマンドが変更になりました。

しかし、Vite で、npm run dev をした場合でも、css や js が反映されないことがあります。

詳しくは↓

【Laravel9変更点】Laravel Mix→Viteビルドツール変更 / webpack.mix.jsがない / npm run devが途中で止まってしまう問題

npm installしたのにwebpack.mix.jsがない, npm run devが途中で止まってしまう, css等が生成されない npmとnodeが使える状態にも関わらず、「npm run dev」を実行すると、 APP_...

blog.taniii.com

2022.09.09

npm run dev しても、css/js が効かない

Vite の npm run dev は、hot-reload になっていて、変更をリッスンするようになっています。

変更をリッスン中は、public ディレクトリ直下に、hot という名前のファイルが生成されます。

逐次、css/js ファイルが配信される訳ですが、配信先がこの hot ファイル 内に記載されています。

ここの配信先が間違っていると、css/js が反映されません。

Laravel Sail で作った開発環境の場合、以下のように変更します。

> hot

http://0.0.0.0:5173

となっているのを、

↓

http://localhost:5173

に変更します

ただ、毎回 npm run dev するたびに変更するのは大変なので、

配信先設定を vite.config.js に追記しておきます。

> vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    server: {
        hmr: {
            host: 'localhost',
        }
    },
});

http://localhost:5173 にこのページが表示されれば大丈夫です