Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sourcemap for '...bootstrap.min.css' points to missing source files #10068

Closed
7 tasks done
jez9999 opened this issue Sep 10, 2022 · 2 comments · Fixed by #13662
Closed
7 tasks done

Sourcemap for '...bootstrap.min.css' points to missing source files #10068

jez9999 opened this issue Sep 10, 2022 · 2 comments · Fixed by #13662
Labels
feat: css p3-minor-bug An edge case that only affects very specific usage (priority)

Comments

@jez9999
Copy link

jez9999 commented Sep 10, 2022

Describe the bug

I have Vite configured to include CSS source maps in dev:

export default defineConfig({
    ...
    css: {
        devSourcemap: true
    },
    ...
});

My Vue site's code, in main.js, imports Bootstrap's CSS like this:

import 'bootstrap/dist/css/bootstrap.min.css';

When I load a page on the site, Vite gives me the message:

Sourcemap for "C:/Development/SPA/myApp/node_modules/bootstrap/dist/css/bootstrap.min.css" points to missing source files

React's default Webpack config doesn't seem to have the same problem when I import the Bootstrap minified CSS in the same way. I think it's because the Bootstrap bootstrap.min.css.map file, amongst its various source mappings, includes "dist/css/bootstrap.css". This is apparently supposed to be interpreted relative to the node_modules/bootstrap root, but Vite interprets it relative to bootstrap.min.css, and so it looks for bootstrap/dist/css/dist/css/bootstrap.css and doesn't find it, causing the error.

Reproduction

Configure Vite to include CSS sourcemaps, add Bootstrap to project, import it in Vue file

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
    Memory: 2.06 GB / 15.64 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (105.0.1343.33)
    Internet Explorer: 11.0.19041.1

Used Package Manager

npm

Logs

No response

Validations

@sapphi-red sapphi-red added feat: css p3-minor-bug An edge case that only affects very specific usage (priority) labels Sep 11, 2022
@sapphi-red
Copy link
Member

related: #8411

@jez9999
Copy link
Author

jez9999 commented Sep 11, 2022

@sapphi-red I don't think that's the same problem, actually. That seems to be the browser trying to retrieve the sourcemap, whereas here it's Vite trying to inline the sourcemap and failing on one of the files.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: css p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants