typo3-vite
TYPO3 Vite Skill
Vite 7 build configuration for TYPO3 v13+ sitepackage development with praetorius/vite-asset-collector.
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.
CSP Compliance
More from dirnbauer/webconsulting-skills
document-processing
>-
187ai-search-optimization
>-
184typo3-content-blocks
>-
88typo3-ddev
Use when providing DDEV URLs, accessing TYPO3 backend in browser, performing any ddev command (e.g. start, stop, restart, describe, exec), setting up DDEV for TYPO3 extension development, or testing across multiple TYPO3 versions. Triggers on: ddev URLs, backend URLs, local development, docker environment, PHP version management, multi-version testing.
84webconsulting-branding
>-
78legal-impressum
>-
75