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