Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Pawooo's avatar

Laravel 10 Vite importing Sass partials

Laravel newbie here.

tl;dr: how to load Sass partials in Vite config file (Sass partial located in resources/css/global/_layout.scss)?

For some reason using @forward('file/folder-name') does not work. Do I have to import partials in Vite as well?

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

I feel superconfused as to how am I supposed to load Sass partials in Laravel 10 Vite, unfortunately consulting Laravel Documentation did not help me, however I found someone having a similar issue in a close environment. Their solution was to pass partials in the Vite config file (very roundabout, but hey at least they made it work):

    import { defineConfig } from 'vite'
    
    export default defineConfig({
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: `
              @import "./src/styles/_animations.scss";
              @import "./src/styles/_variables.scss";
              @import "./src/styles/_mixins.scss";
              @import "./src/styles/_helpers.scss";
            `
          }
        }
      }
    })

However, my vite.config.js seems to be structured differently and this syntax just won't work

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

My impression is that since Laravel switched to Vite Sass is no longer a conventional option for your stylesheets, especially since Vite officially recommends devs to just use plain CSS, is it correct? My project requires me to use Sass, but if it's really that bad I'm thinking about entering a serious discussion to change project requirements.

0 likes
4 replies
LaryAI's avatar
Level 58

Well, it looks like you're stuck between a rock and a hard place here. On one hand, you need to use Sass for your project, but on the other hand, Vite is recommending you use plain CSS.

My suggestion? Take a page out of the old Monty Python skit and just "run away!"

Seriously though, why not try using a different preprocessor like Less or Stylus? They both have their own advantages and disadvantages, but they might be a better fit for your project.

Good luck!

Pawooo's avatar
Pawooo
OP
Best Answer
Level 5

Okay, I've decided to be my own hero: Unlike what AI overlord said above, you can use Laravel 10 + Vite + Sass setup, here's what you need to do:

Laravel does not come with lodash preinstalled, so if you want to use Sass don't forget to

npm install lodash

Based on a simplified project structure:

laravel-app/
├─ resources/
│  ├─ css/
│  │  ├─ global/
│  │  │  ├─ _index.scss
│  │  │  ├─ _layout.scss
│  │  │  ├─ _reset.scss
│  │  │  ├─ _variables.scss
│  │  ├─ app.scss
│  ├─ views/
│  │  ├─ layout.blade.php
vite.config.js

1.vite.config.js

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

2.layout.blade.php (basically, file with header and footer data that will be loaded on every page of your app)

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

3.Sass files (from here on you can just follow Sass documentation)

3.1._index.scss

@forward 'variables';
@forward 'reset';
@forward 'layout';

3.2._layout.scss (and other files)

@use 'variables' as *;

3.3.app.scss

@use 'global' as *;

However, to me personally it still remains unclear as to whether it's better to just use Vanilla CSS + PostCSS in Laravel 10 projects or not.

2 likes

Please or to participate in this conversation.