From craft-workspace-webconsulting-skills
Configures Vite 7 builds for TYPO3 v13/v14 LTS using vite-asset-collector: SCSS architecture with Bootstrap 5.3 theming, per-content-element entrypoints, SVG optimization, PostCSS setup, local fonts, CSP compliance, and compression.
npx claudepluginhub dirnbauer/webconsulting-skillsThis skill uses the workspace's default tool permissions.
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).
Guides Vite setup, configuration, plugins, dev server, CLI commands, production builds, CSS handling, assets, HMR, SSR, env vars, and plugin authoring.
Provides official Vite guidance for setup, configuration, plugins, CLI, HMR API, SSR, backend integration, and deployment. Use for Vite project config or plugin needs.
Guides Vite configuration, plugin API, SSR builds, and Vite 8 Rolldown migration for vite.config.ts, plugins, libraries, and SSR apps.
Share bugs, ideas, or general feedback.
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/compressJsno longer have any effect. An external build tool (Vite / webpack / esbuild) is required for production-grade asset handling on v14.
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.
Never import Bootstrap as a whole. Import only the components you use (bootstrap/scss/grid, bootstrap/scss/buttons, etc.) to minimize CSS bundle size.
Custom SvgCopyOptimizePlugin processes SVGs from Resources/Private/Svg/ through SVGO and writes optimized files to Resources/Public/Svg/. Supports dev-mode file watching.
Assets loaded via <vite:asset> ViewHelper automatically get nonce attributes for Content Security Policy compliance. No inline <script> or <style> tags needed.
| 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/vite-configuration.md -- Complete vite.config.ts, entrypoints, SVG plugin, CSPreferences/scss-architecture.md -- SCSS folder structure, import chain, naming conventions, CSS unitsreferences/bootstrap-theming.md -- Bootstrap variable customization per projectThis skill is based on the excellent work by Netresearch DTT GmbH.
Original repository: https://github.com/netresearch/typo3-vite-skill
Copyright (c) Netresearch DTT GmbH — Methodology and best practices (MIT / CC-BY-SA-4.0)
Special thanks to Netresearch DTT GmbH for their generous open-source contributions to the TYPO3 community, which helped shape this skill collection. Adapted by webconsulting.at for this skill collection