広告

Laravel9でBootstrap&Vite

Laravel9のv9.19からフロントビルドツールがLaravelMixからViteに変更されたようです。そこで、Laravel9をインストールしてBootstrap導入時の設定を確認しておきます。

開発環境

Windows10
Docker Desktop
WSL2

Laravel9インストール

①Laravel/Sailでインストール

$ curl -s https://laravel.build/project | bash

②起動

$ cd project
$ sail up -d

Bootstrapとユーザ認証のインストール

$ sail composer require laravel/ui
$ sail artisan ui bootstrap --auth
$ sail artisan migrate

$ sail npm install
$ sail npm run dev
laravel9-bootstrap-vite_vite

トップページ

laravel9-bootstrap-vite_top

ログインページ

laravel9-bootstrap-vite_ui_login_1

トップページはいいのですが、ログインページにCSSが効いていません。
Viteの設定が必要なようです。

Vite設定

①ホットリロードのサーバ設定

vite.config.jsにサーバホストの設定を追加します。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
//                'resources/sass/app.scss',
                'resources/css/app.css',	// 追加
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    // ここから追加
    server: {
        hmr: {
            host: 'localhost',
        },
    },
    // ここまで
});

②app.jsでSCSSファイルをインポート

import './bootstrap';
import '../sass/app.scss';  // 追加

③Bladeでスタイル読み込み設定

@vite(['resources/sass/app.scss', 'resources/js/app.js'])
↓変更
@vite(['resources/css/app.css', 'resources/js/app.js'])

④完了

laravel9-bootstrap-vite_ui_login_2

本番環境

$ sail npm run build

public/build/assetsディレクトリにコンパイル後のCSSとJavaScriptが作成されます。

補足

よく出すエラー

Vite manifest not found at: /var/www/html/public/build/manifest.json

laravel9-bootstrap-vite_exception

図の右側の通り

$ sail npm run dev

してませんでしたw

ViteからMixへの移行に関する公式ガイド

Migrating from Vite to Laravel Mix