Describe the bug

I'm including this file in my project: https://github.com/twbs/bootstrap/blob/v5.1.3/dist/css/bootstrap.min.css (as import 'bootstrap/dist/css/bootstrap.min.css';)

This file includes an embedded comment /*# sourceMappingURL=bootstrap.min.css.map */

When running with Vite dev server and opening it in Chrome, I always get a warning in dev console:

DevTools failed to load source map: Could not load content for https://vitejs-vite-sfhie6--3000.local.webcontainer.io/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

e.g. https://vitejs-vite-sfhie6--3000.local.webcontainer.io/ with dev tools open.

Since Vite injects some magic into the CSS, I think Chrome no longer knows the relative path where to load the source map? I guess Vite should rewrite the URL in sourceMappingURL= as well.

No such warning with Firefox.

Reproduction

https://stackblitz.com/edit/vitejs-vite-sfhie6?file=main.js

System Info

I provided a repro, should be enough no? https://stackblitz.com/edit/vitejs-vite-sfhie6?file=package.json

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 https://github.com/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.