TYPO3 Vite Skill

Vite 7 build configuration for TYPO3 v13 and v14 LTS sitepackage development with praetorius/vite-asset-collector. Current gold standard: v14.3 LTS (released 2026-04-21).

v14 context: TYPO3 v14.0 removed the core's built-in frontend CSS/JS concatenation and compression (Breaking #108055) and CSS comment/whitespace stripping (Breaking #107944). config.concatenateCss/compressCss/concatenateJs/compressJs no longer have any effect. An external build tool (Vite / webpack / esbuild) 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) that imports its SCSS and TypeScript. This enables automatic code splitting -- only the CSS/JS needed for visible content elements is loaded.

Selective Bootstrap Imports

Never import Bootstrap as a whole. Import only the components you use (bootstrap/scss/grid, bootstrap/scss/buttons, etc.) to minimize CSS bundle size.

SVG Optimization

Custom SvgCopyOptimizePlugin processes SVGs from Resources/Private/Svg/ through SVGO and writes optimized files to Resources/Public/Svg/. Supports dev-mode file watching.