n212's avatar
n212
OP
3 years ago
Level 2

Laravel Vite and SASS

Update - Working files

Since this post has gotten traction and the original was not clear, I've updated it to help people who find this on Google.

Steps to make SASS work with your project

  1. Run the following command: npm add -D sass
  2. Add the path to your SASS file in the input:

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"], // add scss file
            refresh: true,
        }),
    ],
});
  1. Then finally add the following line in your blade file: @vite(['resources/sass/app.scss', 'resources/js/app.js'])

Sass should now be working withing your project.

1 like
6 replies
MohamedTammam's avatar

What happens if you re-run it? and what's the content of compiled files?

mijeli's avatar
mijeli
3 years ago
Best Answer
Level 1

Your config file is OK.

Export from SCSS to CSS use the "npm run build" command, a file will be created in the public/build folder. www.laravel-vite.dev/guide/essentials/building-for-production.html

My vite.config.js:

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

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

Laravel Blade:

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

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

Good luck :D
9 likes
bestmomo's avatar

So we can't use Vite for dev when we use SASS?

CavenRE's avatar

Hey guys,

In case someone stumbles across this post trying to see if scss can work or is just curious to see how to do it. You can and it's super simple. just change your file and selection to scss;

input: ['resources/scss/app.scss', 'resources/js/app.js'],

And make sure to install;

npm install -D sass-embedded

Oh and dont forget to update your layout your @vite directive;

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

Everything should just work after that.

1 like

Please or to participate in this conversation.