Bagisto Forum

    Bagisto

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

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

    General Discussion
    2
    3
    107
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      arunchahar last edited by

      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);
                      }
                  },
              },
          };
      });
      
      
      1 Reply Last reply Reply Quote 0
      • Rishabh-Webkul
        Rishabh-Webkul last edited by

        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

        A 1 Reply Last reply Reply Quote 0
        • A
          arunchahar @Rishabh-Webkul last edited by

          @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'),
                  ]);
          
              }
          
          
          1 Reply Last reply Reply Quote 0
          • First post
            Last post