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

Rishabh-Webkul

Hello @arunchahar

Kindly check the below blog link & custom theme playlist for the reference

I hope this will able to resolve your quuery.

https://bagisto.com/en/create-custom-theme-in-bagisto/

https://www.youtube.com/playlist?list=PL9H_LFXi_oao2tfVIKUDyiQXpiWaS61-S

Warm Regards
Team Bagisto

arunchahar

@Rishabh-Webkul Blade changes not updating in custom theme, but CSS changes work

Working:

Tailwind CSS changes (e.g., colors in app.css) update instantly with npm run dev

Not working:

Blade file changes (e.g., removing HTML sections) don't reflect, even after:

Restarting Vite

Running php artisan vendor:publish --provider="MyThemeProvider" --force

Clearing all caches, am i missing something?

My setup:
config/themes.php

    'shop' => [
        'default' => [
            'name'        => 'Default',
            'assets_path' => 'public/themes/shop/default',
            'views_path'  => 'resources/themes/default/views',

            'vite'        => [
                'hot_file'                 => 'shop-default-vite.hot',
                'build_directory'          => 'themes/shop/default/build',
                'package_assets_directory' => 'src/Resources/assets',
            ],
        ],
        'nexus-theme' => [
            'name'        => 'Nexus',
            'assets_path' => 'public/themes/nexus-theme/default',
            'views_path'  => 'resources/themes/nexus-theme/views',

            'vite'        => [
                'hot_file'                 => 'shop-nexus-theme-vite.hot',
                'build_directory'          => 'themes/shop/nexus-theme/build',
                'package_assets_directory' => 'src/Resources/assets',
            ],
        ],
    ],

Vite.config.js

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

Service provider boot:

    public function boot(): void
    {
        $this->publishes([
            __DIR__ . '/../Resources/Views' => resource_path('themes/nexus-theme/views'),
        ]);

    }