こんにちは、webエンジニア歴5年のtakaです。

Laravelいいですよね。

新規サービスはLaravelで構築しています。

今回Laravelを新規構築し、scss使おうと思ったら少し詰まったので、解決策をまとめておきます。

誰かのためになれば幸いです。

状況整理

以下のコマンドでLaravelの新規プロジェクトを作成します。

composer create-project laravel/laravel my_app

Laravelのバージョンはv9.19.0 です。

.envの作成、npm installなど諸々行い、npm run devを行います。
するとなんか出てきました。

> dev
> vite

vite v2.9.14 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 419ms.

Laravel v9.19.0

> APP_URL: http://app.localhost.com/

いつもと違いますね。
困りました。

原因

原因は、Laravelは2022年6月29日から、Viteがデフォルトでインストールされるようになったためです。

今まではlaravel-mixを使ってビルドステップを定義していましたが、LaravelにViteが入っている場合、npm run devを実行すると、自動でViteが立ち上がるようになりました。

参照
https://laravel-news.com/vite-is-the-default-frontend-asset-bundler-for-laravel-applications

Viteとはなんぞ？

Viteとは、Vue.jsの作者のEvan You氏が開発中のノーバンドルなビルドツールです。
大きなメリットとしては以下の2点になります

• 開発時はバンドル不要で動作するので、大規模プロジェクトでも初回起動が非常に早い
• HMR（画面の再描画無しにファイル変更をブラウザに適用してくれる機能）が、モジュールの総数と切り離されているため一貫して高速に動作する

というわけで、早いらしいです。

解決方法

①
vite.config.jsがルートディレクトリにあるので、編集します。
webpack.min.jsに記載していたビルドしたいファイルを追加します。

編集前

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

export default defineConfig({
 plugins: [
  laravel([
   'resources/css/app.css',
   'resources/js/app.js',
  ]),
 ],
});

編集後

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

export default defineConfig({
 plugins: [
  laravel([
   'resources/scss/common.scss', // 追加
   'resources/js/app.js',
  ]),
 ],
});

②bladeで読み込むファイルを記載します。

※今ではビルド後のファイルを読み込んでいましたが、@viteを利用するとビルド前のパスを指定することになります。
編集前

＜link rel="stylesheet" href="{{ asset('css/components.css') }}"＞

編集後

@vite(['resources/scss/common.scss'])

③npm run dev を行う。
ファイルパス名など間違っていなければビルドできるはずです。

これでOKです。

参照
https://creagia.com/blog/using-laravel-vite-with-bootstrap-and-sass

まとめ

いかがでしたか？

LaravelがViteをデフォルトでインストールされるようになったんですね。

今後、Viteがどのくらい有用かどうか詳しくみていきたいです。
それでは。