Upstream CSS files with embedded sourceMappingURL are loaded from wrong location

[intgr]

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.

[septatrix]

I also stumbled upon this today. My attempts at somehow solving this with manual import or linking inside the public/ did not bear fruit so I would be very happy to have this resolved (or at least get shown some workaround)

[flys1ck]

As a temporary workaround to silence this warning you can set css.devSourcemap to true in your vite config (https://vitejs.dev/config/shared-options.html#css-devsourcemap).

css: {
  devSourcemap: true,
},

This will inline the source map into the source map comment sourceMappingURL= in your css file and won't make an extra request to the source map file. Keep in mind, that this feature is still experimental and might come with a performance penalty.

[stoffpalette]

same error here.

i am using gridjs 5.1.0 inside a laravel 9.31 installation (on sail) with vite 3.0.9

when i set css.devSourcemap to true console reports on load:
Sourcemap for "/var/www/html/node_modules/gridjs/dist/theme/mermaid.css" points to missing source files

when i do not use css.devSourcemap, the browser console (chrome 105.0.5195.127) reports:
DevTools failed to load source map: Could not load content for http://localhost/mermaid.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

i am importing the css-file via import "gridjs/dist/theme/mermaid.css";

mermaid.css last line:
/*# sourceMappingURL=mermaid.css.map */

mermaid.css.map is located in the same subfolder of the module as mermaid.css.