Sourcemap failure on Chrome for Vue 2 components with CSS

[jfparadis-appomni]

Describe the bug

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:

• Enablecss.devSourcemap does resolve the problem for Chrome art the cost of a larger payload.
• Do not declare CSS in SFCs.

Reproduction

https://github.com/jf-paradis/demo-vite-issues

System Info

System:
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  npmPackages:
    vite: ^3.0.9 => 3.0.9

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.