How to set theme wise folder structure in laravel vite js build

Question

How to set theme wise folder structure in laravel vite js build

Below my code working only js folder structure but css file folder structure not working properly.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';

export default defineConfig({
    build: {
        outDir: '../build',
        emptyOutDir: true,
        cssCodeSplit: true
    },
    plugins: [
        laravel({
            input: {
                'js/app': 'resources/js/app.build.js',
                
                /*******************************START theme-name*********************************************/
                'frontend/theme-name/general': 'resources/assets/frontend-themes/theme-name/js/build/common.build.js',
                'frontend/theme-name/bootstrap': 'resources/assets/frontend-themes/theme-name/css/bootstrap.min.css',
                'frontend/theme-name/cart.css': 'resources/assets/frontend-themes/theme-name/css/cart.css',
                /*******************************END theme-name*********************************************/
            },
            output: {
                entryFileNames: (assetInfo) => {
                  // assetInfo.facadeModuleId contains the file's full path
                  if (assetInfo.facadeModuleId) {
                    const assetPath = path.dirname(assetInfo.facadeModuleId).replace(rootDir, '');
                    return assetPath + '/[name]-[hash].js';
        
                  } else {
                    return 'assets/js/[name]-[hash].js';
                  }
                },
              },
            refresh: true,
        }),

        commonjs(),
        nodeResolve()
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
        }
    },
});

set theme wise folder structure in laravel vite js build like :

public/build/frontend/theme1/filename.css
public/build/frontend/theme1/filename.js
public/build/frontend/theme2/filename.css
public/build/frontend/theme2/filename.js

Answer 1

The above issue has been resolved we have created multiple vite.config.js files and path added in the package.json file like :

"scripts": {
        "dev": "vite",
        "build": "vite build",
        "build-all-front": "vite build --config config/theme1/vite.config.js && vite build --config config/theme2/vite.config.js",
        "watch": "vite build --watch",
    },

Answer 2

Vite config file structure.

import laravel from 'laravel-vite-plugin';
import path from 'path'
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';

const jsPath = 'resources/assets/theme1/js/build';
const cssPath = 'resources/assets/theme1/css/build';

export default defineConfig({
    build: {
        outDir: '../build/theme1',
        emptyOutDir: true,
        cssCodeSplit: true,
        rollupOptions: {
            output: {
                assetFileNames: ({name}) => {
                    if (/\.css$/.test(name ?? '')) {
                        return 'assets/css/[name]-[hash][extname]';
                    }

                    if (/\.(gif|jpe?g|png|svg|webp)$/.test(name ?? '')){
                        return 'assets/images/[name]-[hash][extname]';
                    }

                    if (/\.(ttf|woff|woff2|eot)$/.test(name ?? '')){
                        return 'assets/fonts/[name]-[hash][extname]';
                    }

                    return 'assets/[name]-[hash][extname]';  
                }
            },
        }
    },
    plugins: [
        laravel({
            buildDirectory: 'build/bigbag',
            input: {
                'js/app': 'resources/js/app.build.js',

                'js/general': `${jsPath}/common.build.js`,

                'common': `${cssPath}/common.build.css`,
            },
            refresh: true,
        }),

        commonjs(),
        nodeResolve()
    ],
    resolve: {
        alias: {
            '~': path.resolve(__dirname, 'node_modules/bootstrap')
        }
    },
});