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

Question

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

score 0 · Accepted Answer · answered May 15 '23 at 08:46

0

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",
    },

answered May 15 '23 at 08:46

Ashok Chavda

17
5

I'm curious as to what is the structure of the vite.config.js for each of the theme that you have. Is it possible to share it? – Bryan Ribo Jul 31 '23 at 18:04
Yes sure structure of the vite.config.js. https://stackoverflow.com/a/76816760/9300035 – Ashok Chavda Aug 02 '23 at 05:04

score 0 · Answer 2 · answered Aug 02 '23 at 05:03

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')
        }
    },
});

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

2 Answers2