How to Integrate Sass With Laravel and Vite

Written by Kaveen J. in Laravel on Jan 10, 2023 • 3~6 minutes

As Laravel developers, most of the time we tend to use Tailwind CSS. But there can be situations where we need to create CSS styles from scratch. Under that kind of situations, managing and maintaining a large CSS code can be a cumbersome task. This is where SASS comes in to the help. SASS or Syntactically Awesome Style Sheets is a powerful CSS preprocessor scripting language which interprets SASS in to CSS. It helps to streamline the styling process of web applications by letting developers to create more efficient and maintainable CSS code by allowing users to use variables, mixins and functions in style sheets. Vite, on the other hand, is a fast and lightweight build tool. In this article, we are going to learn how to integrate SASS with Laravel and Vite.

Install Laravel and Vite

Before we going to the integration part of SASS, we need to create a new Laravel application. Make sure that you have already installed all the necessary tools like NodeJS and Composer or otherwise simply read a comprehensive guide on how to install Laravel.

composer create-project --prefer-dist laravel/laravel laravel-sass

Next, fortunately, we do not need to install Vite separately anymore. Starting from Laravel v9.2.0, Laravel Mix replaced by Vite and comes as the default frontend assets bundler in Laravel applications. Visit the related pull request #5904 if you need.

Today we're pumped to announce that new Laravel projects use Vite to bundle frontend assets. Breeze and Jetstream have been updated as well. 🔥

Experience lightning fast Hot Module Replacement when using the new Breeze / Vite stack with Inertia Vue or React. ⚡
— Taylor Otwell ☁️ 🦹 (@taylorotwell) June 28, 2022

Install SASS to Laravel Application

However, Vite does not come SASS pre-installed. So, we need to install SASS as a development dependency by running the following command.

npm install sass --save-dev

Build assets with the following command.

npm run build

Add SASS to Laravel and Vite Project

Now that you have Laravel and SASS installed, so it is time to configure the Laravel project. Open the vite.config.js file and change the CSS path as resources/sass/app.scss.

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,
        }),
    ],
});

Now open your blade template/layout file(s) and replace their CSS stylesheet paths in the head sections with the following to load the style sheet.

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

Last but not least, create a new file called app.scss in the resources/sass directory and add some SASS styles or use the following styles to test.

body {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    .container {
        background-color: #f23a2e;
        display: inline-block;
        color: white;
        border-radius: 10px;

        h1 {
            padding: 10px;
            margin: 0px;

            span {
                color: #c66394;
                background-color: white;
                padding: 5px 15px;
                margin: 0px;
                border-radius: 10px;
            }
        }
    }
}

Add following HTML code in to a blade file.

<div class="container">
    <h1>Laravel <span>SASS</span></h1>
</div>

Use SASS in Laravel for Development and Production

At this moment, you may have already noticed it that the changes are not yet applied or visible and the reason behind that is because we need to build assets continuously while we make changes to the CSS. So, run the following command to build assets continuously.

npm run dev

When you are going to build for production, run the following command. It will build an optimized version of the assets.

npm run build

In addition to the things mentioned in this article, there are a lot of other specific use cases with Laravel Vite. Visit the official Laravel Vite documentation for more details.