Vite build compiled files based on directories

Question

this is something that I used to do in gulp and webpack but I'm not able to achieve this on vite.

I have different themes in different folders like

resources/
    themes/
         theme1/
              js/
              css/
         theme2/
              js/
              css/

I'm trying to build files in their separate folders based on theme name like this should be the output

public/
     build/
         theme1/
         theme2/

I've tried to follow a lot of forums but couldn't get the code to work. I also tried using vitemulti builder but there must be something I'm missing. This is my code

export default defineConfig({
    resolve: {
        alias: {
            'resources/themes/default/sass/app.scss': '/resources/themes/default/css/app.css',
        },
    },
    plugins: [
        vue(),
        laravel({
            input: [
                'resources/themes/theme1/sass/app.scss',
                'resources/themes/theme1/js/app.js',
                'resources/themes/theme2/sass/app.scss',
                'resources/themes/theme2/js/app.js',
            ],
            refresh: true,
        }),

        /*viteMultiBundler({
            file_versioning: true,
            js: [
                {
                    filename: "theme1",
                    entryPoints: ['resources/themes/theme1/js/app.js'],
                },
                {
                    filename: "theme2",
                    entryPoints: ['resources/themes/theme2/js/app.js'],
                }
            ],
            sass: [
                {
                    filename: "theme1",
                    entryPoints: ['resources/themes/theme1/sass/app.scss'],
                },
                {
                    filename: "theme2",
                    entryPoints: ['resources/themes/theme2/sass/app.scss'],
                }
            ]
        }),*/
    ],
});

Can anyone  help me achieve the desired output?

Answer 1

In Vite, you can use the build.rollupOptions configuration to specify multiple input files and their output paths.

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            input: {
                'theme1/app': 'resources/themes/theme1/js/app.js',
                'theme2/app': 'resources/themes/theme2/js/app.js',
            },
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "resources/themes/theme1/sass/app.scss"; @import "resources/themes/theme2/sass/app.scss";`,
            },
        },
    },
    server: {
        port: 3500
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm.js'
        }
    }
})

In this configuration, the build.rollupOptions.input option is used to specify the input files and their output paths. The keys of the input object are the output paths relative to the outDir (which defaults to dist), and the values are the corresponding input file paths.