laravel-vite-pluginを用いてSCSSからCSSに変換する

開発環境

• Windows 10 Pro(64bit)
• Node v20.12.2
• Laravel 10.10
• PHP 8.1.9 (cli) (built: Aug 2 2022 14:17:26) (ZTS Visual C++ 2019 x64)

※もし、Laravelインストール時に、Viteがインストールされていなければ、Nodeのバージョンを最新にしてから、Viteをインストールしてみてください。

1./resourcesディレクトリ内に、scssディレクトリを作成し、その中に、app.scssを作成する

2.app.scssに適当なコードを書く

app.scss

$parent_block_width: 100px;
$parent_block_height: 100px;
$parent_bg_color: red;
$children_block_width: 50px;
$children_block_height: 50px;
$children_bg_color: blue;

.parent{
  width: $parent_block_width;
  height: $parent_block_height;
  background-color: $parent_bg_color;
  .children{
    width: $children_block_width;
    height: $children_block_height;
    background-color: $children_bg_color;
  }
}

3.ルートディレクトリにあるvite.config.jsを開き、inputの中に、以下の記述を追加します。

vite.config.js

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

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

4.Vite用にsassのプリプロセッサをインストールします。

npm add -D sass 

5.コマンドプロンプト上でビルドします。そうすると、/public/assetsディレクトリ内にapp-xxxxx.cssのファイルが作成されます。

npm run build

6.最後に読み込ませる方法ですが、Bladeテンプレート内のheadタグ部分に、以下のコードを追加。これを行うと、上記のビルドしたcssファイルを読み込むように変換します。

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

参考リンク

• CSS プリプロセッサー