CSS Broken After npm run build in Custom Theme Package (Vite)
-
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); } }, }, }; });
-
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 -
@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'), ]); }