Vite 7 build configuration for TYPO3 v13 and v14 LTS sitepackages with praetorius/vite-asset-collector. Gold standard: v14.3 LTS (2026-04-21).
v14 context: TYPO3 v14.0 removed the core's built-in frontend CSS/JS concatenation, compression, and CSS comment/whitespace stripping (Breaking #108055, #107944).
config.concatenateCss/compressCss/concatenateJs/compressJsno longer have any effect -- an external build tool is required for production-grade asset handling on v14.
Key Concepts
Entrypoint-per-CE Pattern
Each content element gets its own Vite entrypoint (*.entry.ts) importing its SCSS and TypeScript, enabling code splitting -- only visible content elements' CSS/JS is loaded.
Selective Bootstrap Imports
Never import Bootstrap as a whole -- import only the components used (bootstrap/scss/grid, bootstrap/scss/buttons) to minimize CSS size.
SVG Optimization
Custom SvgCopyOptimizePlugin processes SVGs from Resources/Private/Svg/ through SVGO into Resources/Public/Svg/, with dev-mode file watching.
CSP Compliance
Assets loaded via <vite:asset> ViewHelper automatically get nonce attributes for CSP compliance -- no inline <script>/<style> tags needed.
Dev Server allowedHosts Trap
Vite enforces host-header checks by default on an HTTP dev server: a host header that is not localhost, under .localhost, an IP address, the host named in server.host, server.hmr.host, preview.host or server.origin, or listed in server.allowedHosts or the __VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS environment variable gets HTTP 403 "Blocked request" -- breaking HMR behind a reverse proxy (Traefik, nginx). Default since the GHSA-vg6x-rcgg-rjx6 fix (4.5.6/5.4.12/6.0.9); every Vite 7.x/8.x release enforces it. List the proxy's hostnames explicitly -- allowedHosts: ['.ddev.site'] (a leading dot allows the domain and every subdomain) plus any additional_fqdns -- and allow the same origins in cors (default: localhost only); cors controls cross-origin loading, not the 403. Never use allowedHosts: true or cors: true: both let any website read the dev server's sources. Set the options inside the single existing server: block -- a second server: { ... } literal silently overwrites the first's keys without warning. See references/vite-configuration.md.
Stale Page Cache After a Build Trap
vite build mints new content hashes and deletes the old files, but TYPO3's page cache keeps rendering markup with the old names -- the browser 404s on main.entry-<oldhash>.js and the page loads with no JS/CSS while still rendering normally, looking like a broken feature rather than a broken asset. Run vendor/bin/typo3 cache:flush as part of the build and verify what's actually served rather than trusting the build timestamp -- an unloaded bundle and a correctly idle one look identical to a naive check. See references/vite-configuration.md.
Technology Stack
| Layer | Technology |
|---|---|
| Build | Vite 7+ with praetorius/vite-asset-collector |
| CSS | Bootstrap 5.3+ (selective imports, custom theming) |
| PostCSS | autoprefixer + cssnano (production) |
| SCSS | Modern Compiler API (api: 'modern-compiler') |
| SVG | Custom SVGO plugin (SvgCopyOptimizePlugin) |
| Compression | Gzip + Brotli (production) |
| Package Manager | npm, pnpm, or yarn |
References
references/vite-configuration.md-- vite.config.ts, entrypoints, SVG plugin, CSPreferences/scss-architecture.md-- SCSS structure, import chain, naming, CSS unitsreferences/bootstrap-theming.md-- SCSS theming, CI-color mapping, selective imports