Tファイル

Laravelでscssをビルドしたいけどdev、viteってでてきた【バージョン9】

t-file

こんにちは、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点になります

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

解決方法

①
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がどのくらい有用かどうか詳しくみていきたいです。
それでは。

モバイルバージョンを終了