Vite developers struggle to trace generated CSS to source files
Frontend developers using Vite report that development CSS sourcemaps can be missing, omit paths into dependencies, or use paths that disagree with JavaScript sourcemaps. That makes it difficult to trace generated styles back to the files that produced them, and turning on Vite's development sourcemaps does not resolve every issue. A separate request for generating documentation from CSS comments points to an adjacent CSS-tooling need, but has less evidence.
For frontend developers using Vite. Mentioned from Sep 2022 to Oct 2023 on GitHub and Stack Exchange.
4 different people described this problem in 2 separate discussions.
- Indie fit
- 5.0/10
- Pain
- 5.0/10
- Frequency
- 5.8/10
- Willingness to pay
- 0.0/10
- Momentum
- 5.0/10
- Who pays
- Professionals
- Competition
- Medium
- Build difficulty
- Medium
What people said
Quoted word for word. Follow a link to read the whole discussion.
With css: {devSourcemap: true} the DevTools warning comes away, however mappings do not include paths from within node_modules (clicking on source file name results Could not load content ...)
Currently with a trivial Svelte hello world, it seems that Vite generates different App.svelte paths in the CSS vs. JS sourcemaps (in the JS case it puts the folder in front, in the CSS case it's just the filename)
bmeurer on GitHub (vitejs/vite)Nov 2022
Build brief
See what to build and who will buy it
- 2 product ideas with the smallest useful version and pricing
- 4 places to find your first customers
- 2 more quotes from people who have this problem
- Current workarounds, existing solutions and risks