When css.devSourcemap is false or unset, Chrome fails to display the mapped source for Vue 2 single file components (SFC) that contain CSS. Note that Safari works as expected.
Some limitation in Chrome? since the template, the javascript, and the CSS are served separately, it seems that Chrome defaults to showing the CSS.
As a workaround, either:
- Enable
css.devSourcemapdoes resolve the problem for Chrome art the cost of a larger payload. - Do not declare CSS in SFC.
- Download and execute the sample app
git clone [email protected]:jf-paradis/demo-vite-issues.git
cd demo-vite-issues
npm install
npm run dev
- Open Chrome at the URL specified by Vite.
- Open DevTools and reload the page: the code will stop at a debugger statement.
The source code shows and the debugger stopped at the debugger statement.
The source code is not shown (the file is blank ecept for CSS).