CSS Broken After npm run build in Custom Theme Package (Vite)

[arunchahar]

Hi everyone,

I've created a separate custom theme package in Bagisto (v2.3). When I run npm run dev, everything works perfectly fine. However, when I run npm run build, the site loads without any CSS — the layout breaks and styles are completely missing.

Am I missing something specific while configuring Vite for a custom theme?

Here is my current vite.config.js for the theme:

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import laravel from "laravel-vite-plugin";
import path from "path";

export default defineConfig(({ mode }) => {
    const envDir = "../../../";

    Object.assign(process.env, loadEnv(mode, envDir));

    return {
        build: {
            emptyOutDir: true,
        },

        envDir,

        server: {
            host: process.env.VITE_HOST || "localhost",
            port: process.env.VITE_PORT || 5173,
            cors: true,
        },

        plugins: [
            vue(),

            laravel({
                hotFile: "../../../public/shop-nexus-theme-vite.hot",
                publicDirectory: "../../../public",
                buildDirectory: "themes/shop/nexus-theme/build",
                input: [
                    "src/Resources/assets/css/app.css",
                    "src/Resources/assets/js/app.js",
                ],
                refresh: true,
            }),
        ],

        experimental: {
            renderBuiltUrl(filename, { hostId, hostType, type }) {
                if (hostType === "css") {
                    return path.basename(filename);
                }
            },
        },
    };
});