So, I've been tearing my hair out over this problem with Webpack generating incorrect sourcemaps for my Sass files. When I inspect in developer tools (or use a tool like this one), the generated CSS maps to the wrong source files. This only seems to happen with my own code, not third-party Sass files (I'm including Bootstrap in my project). I've definitely narrowed the issue down to being Webpack-related: When I compile from the command line with (Dart) Sass, the emitted sourcemap is correct. I've setup an example project to prove this. The Webpack configuration there is nearly identical to my actual project's config (except the actual project's config also compiles JS, images, fonts, etc.). Compare the output in the dist directory when you run npm run build to when you run sass --embed-sources -I ./node_modules/ src/scss/app.scss:dist/app.css, there's definitely a difference in the main sourcemap. If it matters, you'll notice that I'm using use directives instead of import (as opposed to Bootstrap's outdated Sass code).