How to use SASS/SCSS with Laravel Vite

Step 1:

npm add -D sass

# OR

yarn add sass -D

Step 2:

Update the `vite.config.js` file like this.

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

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

Step 3:

Update the layout file.

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