Search code examples
sassnode-modulesvitelaravel-9

Vite 3.0.9 not compiling scss files with Laravel v9.26.1

basically having a slight compilation issue with Vite.js. The following code is my vite config:

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

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

For some reason the ~ in the app.scss does not work. I think this comes from the sass loader originally but not 100% sure on how to get this to work. My app.scss looks like:

// Variables
@import 'variables';

// ADMINLTE
@import '~admin-lte/build/scss/adminlte';

If I remove the ~ it still compiles but the sub package AdminLTE has many ~ references within the package and the error is:

 Error: Can't find stylesheet to import.
     ╷
  10 │ @import "~bootstrap/scss/functions";
     │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^

which is inside the adminlte.scss (inside node_modules).

I have looked at a couple of fixes, but from the docs it says to use npm add -D sass which I have installed. Not sure if I need to revert to Laravel Mix as this does it out of the box, or is there a fix I haven't found like importing and using sass-loader?

Any support would be very greatful.

Solution

  • Instead of

    @import "~bootstrap/scss/functions";

    use the following

    @import "bootstrap/scss/functions";