I’m using Vite in my laravel 11 project, but i am encountering an issue when i compile my SCSS files.
have 2 app.scss files within my project, 1 for frontend and 1 for admin. when i compile my assets for production my app.scss files are getting combined into 1 singular CSS file.

What i tried:
I’ve attempted modifying the laravel plugin configuration within the vite.config.js file. However, these adjustments haven’t given me the desired outcome.

Here are the specific actions I took:

• I made changes to the laravel plugin configuration, but it still bundled all the CSS assets into a single file. In some instances, it even compiled the CSS (still bundled) without handling the JS files.

The config im using now:

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/assets/admin/sass/app.scss',
                'resources/assets/frontend/sass/app.scss',
                'resources/assets/admin/js/app.js',
                'resources/assets/frontend/js/app.js',
            ],
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            external: ['axios'],
        },
    }
});

Expected Outcome:

I anticipated Vite to compile each SCSS file into its corresponding CSS file. This would result in separate CSS outputs (e.g., app-[hash].css and app-[hash].css or admin.css and frontend.css) instead of a single app-[hash].css file.

Actual Result:

Running npm run build produces a single app-9kx3olKa.css file containing all the compiled SCSS styles.

npm run build

> build
> vite build

vite v5.2.13 building for production...
✓ 6 modules transformed.
public/build/manifest.json              0.67 kB │ gzip:  0.19 kB
public/build/assets/app-9kx3olKa.css  225.60 kB │ gzip: 30.74 kB
public/build/assets/app-BbP1iE-y.js     0.11 kB │ gzip:  0.11 kB
public/build/assets/app-B978dTWO.js     0.11 kB │ gzip:  0.11 kB
✓ built in 3.93s

This behavior deviates from my expectation of having separate CSS outputs for each SCSS file.

I’d appreciate any insights into why this behavior might be happening and how to configure Vite to compile each SCSS file into its own corresponding CSS file.