[FIX-006] Importmap Style Blockage
Using a Vite plugin to strip development importmaps and fix missing production styles.
[FIX-006] Importmap Style Blockage
📝 Problem Background
After a production build, the page logic runs correctly but has absolutely no CSS styles. Inspecting the HTML reveals that while Vite's injected <link rel="stylesheet"> tag is present, the page still fails to render styles.
🧪 Effort Metrics
- Attempt Count: 2
- Time Spent: 20 min
- Complexity: ⭐⭐⭐ (Tricky)
🔍 Root Cause Analysis
Manual Importmap Pollution: A manually written <script type="importmap"> in index.html has a very high priority. If it persists after the build, it can interfere with the browser's module resolution, potentially overriding Vite's dynamically generated entry script due to an old version reference, thereby blocking the stylesheet's loading timing.
🛠️ Fix Strategy
Build-Time Sanitizer Ritual:
- Implement a custom plugin in
vite.config.ts. - When
command === 'build', use regex to forcibly remove the entireimportmapblock from the HTML. - Ensure the production environment exclusively uses Vite's
assets/hosting model.
Result: Completely resolved the bizarre issue of missing styles in production.