【Laravel】Laravel MixではなくViteでSCSSを使う

Laravelのビルドツールとして長らくデフォルトだったLaravel Mix（webpack）が2022/6/28からViteに変わったようです。
※以下、Laravel sail環境を前提に記載していきます。

1. 設定ファイル編集

vite.config.jsを編集します。Laravel Mixではwebpack.mix.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,
        }),
    ],
});

デフォルトだと上記のようにinput部分はapp.cssとapp.jsだけなので、下記のようにscssも追加します。

input: ['resources/css/app.css', 'resources/scss/app.scss','resources/js/app.js'],

※WindowsのWSL2上で開発している場合は、ホットリロード（変更の自動反映）を有効にするために、以下のようにserverの設定も追加する必要があります。

    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/scss/app.scss','resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        hmr: {
            host: 'localhost'
        }
    }

参考URL

2. scssファイル作成

1で追加したパス（resources/scss/app.scss）通りにscssフォルダとapp.scssを作成します。

3. 読み込み

blaldeファイル等の読み込みたい箇所に下記を記述します。
Laravel Mixではコンパイル後のソースのパスを記述しましたが、Viteの場合はコンパイル前のソースのパスを記述します。

app.blade.php等

@vite(['resources/scss/app.scss', 'resources/js/app.js'])

4. Viteやsassのインストール

sail環境であればnpmはデフォルトでインストールされているはずなので、下記コードでpackage.jsonに書かれているVite等のライブラリをインストールします。

$ sail npm install

sassはpackage.jsonに書かれていないので、下記コマンドで別途インストールします。
なお、インストールが完了するとpackage.jsonにもsassが自動で追記されます。

$ sail npm add -D sass

5. 実行

開発時

$ sail npm run dev

上記コマンドを実行した上でscssファイルの内容を修正するとブラウザへ自動反映されます。Laravel Mixで言うところのnpm run watch-pollですね。実行中はそのターミナルは使用できなくなるので、別のターミナルを立ち上げる必要が有ります。終了する場合は control + c キーです。

本番用

$ sail npm run build

上記コマンドを実行すると、publicディレクトリ内にbuildというフォルダとコンパイル済のcssファイル等が出力されます。なお、複数のscssファイルを統合して１つのcssに書きだしたい場合は、普通にscssフィル内で@use等を使えばOKです。（@importは廃止になるらしい）