Nono.MA

Compile SASS/SCSS with Vite.js

JULY 22, 2022

First, you must install the sass NPM package as a development dependency.

npm install --save-dev sass

Then add your scss file to the vite.config.js file.

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

You can then load the built css file in your Blade views.

// my-view.blade.php
@vite(['resources/sass/app.scss'])
// <link rel="stylesheet" href="http://nono.test/build/assets/app.0b1a4b87.css" />

BlogCodeLaravel