Shopware 6 has long been celebrated for its modular architecture and developer-friendly extension ecosystem, but frontend development undergoes a fundamental transformation in version 6.7+. The platform completely modernizes its asset pipeline, replacing legacy Gulp and Webpack workflows with a Vite-powered architecture. This shift isn’t merely a dependency upgrade—it redefines how developers compile, bundle, and serve styling and scripting across both storefronts and administration dashboards. Understanding this new build process is essential for maintaining, extending, or customizing Shopware 6.7+ projects efficiently and predictably.

The Vite-First Architecture in 6.7+

Shopware 6.7 consolidates frontend tooling under a single, unified development server and bundler. Vite replaces traditional task runners by leveraging native ES modules during development and Rollup-based compilation for production. This eliminates boilerplate watch processes, manual CSS injection, and fragmented build scripts that complicated earlier versions. The result is a highly predictable pipeline where source files map directly to output artifacts, environment detection is automatic, and hot module replacement (HMR) operates at the framework level without requiring custom middleware.

SCSS Compilation & Theming Deep Dive

Styling in Shopware 6.7 flows through a disciplined compilation chain that respects theme inheritance, variable scoping, and cross-module consistency. Storefront SCSS lives under src/Storefront/Resources/app/storefront/src/scss/, while administration styles reside in src/Administration/Resources/app/administration/src/. During development, Vite watches these directories and compiles SCSS on demand. The pipeline automatically processes custom properties, applies vendor autoprefixing, and injects Shopware’s global theming tokens via a dedicated preprocessor configuration.

Theme developers no longer need to manually merge base styles with overrides. Instead, the build system resolves imports using Shopware’s internal alias map, allowing you to extend core components without breaking inheritance chains. Custom themes simply replace targeted SCSS files or override variable maps in their own theme.json definitions. In production, the SCSS pipeline minifies output, extracts critical above-the-fold styles for performance, and applies deterministic file hashing for cache busting. All compiled CSS is then merged into versioned bundles that PHP templates can reference safely.

JavaScript Module Resolution & Bundling

The JavaScript architecture follows a similarly streamlined path. Storefront logic is structured as ES modules under src/Storefront/Resources/app/storefront/src/js/, while administration extensions use TypeScript or vanilla JS within their respective plugin directories. Vite handles module resolution natively, removing the need for complex webpack alias configurations that previously caused import failures in nested dependencies.

The bundler performs automatic tree-shaking, code splitting, and dead-code elimination based on actual usage patterns. Development mode serves unminified modules with inline sourcemaps, enabling precise debugging in browser developer tools. Production builds emit optimized bundles targeting modern browsers by default, with legacy compatibility handled through explicit Babel or esbuild configuration. Import maps are auto-generated during scaffolding, ensuring that third-party dependencies and Shopware’s core libraries resolve correctly without version conflicts.

Configuration Breakdown

Everything is controlled through vite.config.js at your project root. Below is a simplified but production-aligned example reflecting Shopware 6.7+ standards:

import { defineConfig } from 'vite';
import shopwareThemePlugin from '@shopware-ag/meteor-administration-theme';
import { resolve } from 'path';

export default defineConfig({
  root: './src/Storefront/Resources/app/storefront',
  build: {
    outDir: '../../Resources/public/storefront/dist',
    manifest: true,
    rollupOptions: {
      input: [
        resolve(__dirname, 'src/scss/main.scss'),
        resolve(__dirname, 'src/js/main.js')
      ]
    }
  },
  plugins: [shopwareThemePlugin()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@shopware-pkg/agility" as *; @import "vendor/shopware/core/assets/storefront/src/scss/variables";`
      }
    }
  },
  envPrefix: 'SW_',
  optimizeDeps: {
    include: ['swiper', '@popperjs/core']
  }
});

Notice the explicit root, manifest generation, and Shopware’s theme plugin injection. The additionalData property ensures framework variables are globally available without manual imports. envPrefix enforces Shopware’s environment variable naming convention, while optimizeDeps pre-bundles heavy third-party libraries for faster HMR startup.

Custom Themes, Plugins & Asset Manifests

When building custom themes or administration extensions, your Vite configuration must mirror the core structure but target isolated output directories. Shopware 6.7 automatically generates an asset manifest in Resources/public/<context>/dist/asset-manifest.json. This JSON file maps original filenames to hashed outputs, allowing PHP Twig and Symfony controllers to inject versioned assets without cache issues. Plugin developers should never hardcode asset paths; always rely on the manifest API provided by Shopware’s core routing and templating layer.

Development vs Production Workflow

The toolchain behavior changes drastically based on your environment. Run npm run dev to start a Vite server with live SCSS updates, JS HMR, and debug-ready output. Use NODE_ENV=production npm run build to trigger optimization: CSS purging, JS minification, sourcemap generation, and deterministic asset hashing. The CLI automatically detects your context (storefront vs administration) based on the active working directory, so configuration switching is unnecessary. Always validate production builds locally before deployment—development mode masks tree-shaking anomalies that will surface in optimized bundles.

Conclusion

Shopware 6.7’s SCSS and JavaScript build process isn’t a minor update—it’s a deliberate realignment with modern frontend engineering standards. By adopting Vite, Shopware delivers faster iteration cycles, cleaner configurations, and a more predictable extension ecosystem. Developers who embrace this toolchain will find theme development, administration extensions, and storefront customizations significantly easier to maintain and scale. The learning curve is minimal for those familiar with contemporary bundlers, and the long-term gains in performance, cache reliability, and developer experience make it an essential foundation for all future Shopware 6 projects.