【Laravel】Sassの導入

2024.04.13

【Laravel】Sassの導入

UnsplashのAniket Bhattacharyaが撮影した写真

1 環境
2 viteのインストール
3 Sassをインストールする
4 設定ファイルの編集
5 Sassファイルの作成
6 ViewファイルでSassファイルを読み込む
7 アセットファイルの変更を監視させる

環境

OS：Windows11 Pro/WSL2(Ubuntu 22.04.4)
PHP：8.3.2
Laravel：11.2.0
Node：20.11.1

viteのインストール

プロジェクトルートで以下コマンド実行

npm install

※Laravelプロジェクト作成時に既に必要なパッケージはpackage.jsonに記載済み

Sassをインストールする

npm install -D sass

設定ファイルの編集

/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', 'resources/sass/app.scss'],　//⇐編集
            refresh: true,
        }),
    ],

    // ↓↓　WSL使用時のみ必要なコード　↓↓
    server: {
        hmr: {
            host: 'localhost'
        }
    }
    // ↑↑　WSL使用時のみ必要なコード　↑↑
});

Sassファイルの作成

Sassファイル「/resources/sass/app.scss」を作成する

記述内容は任意です。

例）
body{
    background-color: blue;
}

ViewファイルでSassファイルを読み込む

任意のViewファイルのheadタグ内に以下の様に追記します。

<head>
  ~省略~
  @vite(['resources/css/app.css', 'resources/sass/app.scss', 'resources/js/app.js'])
  ~省略~
</head>

アセットファイルの変更を監視させる

以下コマンドにてSassファイルの変更を監視させておくと、Sassファイル保存時に自動でcssファイルを書き換えてくれます。

npm run dev

以上です！