Description
- Operating System: macOS 10.14.5
- Node Version: 8.16.0
- NPM Version: 6.4.1
- webpack Version: 4.35.0
- sass-loader Version: 7.1.0
It seems that there (somewhere in the chain) are some alterations to node-sass generated sourcemaps which results in them pointing to the wrong scss source declarations.
The sourcemaps do not point to completely the wrong file, the point to a file/line in which styling exists for the element, just not the file/line where the shown styles have been defined.
Assumptions
- When style definitions exist in multiple files, sourcemaps point to one of (but in some cases) the wrong file in which they are defined.
- This only seems to be the case when multiple style definitions exist for an element
Screenshots
Webpack generated sourcemap - broken - chrome browser
node-sass generated sourcemap - working - chrome browser
How Do We Reproduce?
Reproducable repository here:
https://github.com/JParkinson1991/webpack-sourcemaps-debug
The ./public/index.html
page in the above repository will show the expected locations of sourcemap references.
These expected locations are correct when the sourcemaps are generated/styles compiled with node-sass directly. This can be achieved by running the following in the above repository npm run script build:node-sass
However, when compiled using webpack and usings its generated sourcemaps the locations do not match up, they are not compeltely wrong in that they reference somewhere in source where this file has been generated, but not the correct point in the code.
Can be checked by running the following in the above repository npm run script build:webpack
Testing
In chrome, when source compiled with node-sass the sourcemaps are correct, they are incorrect when compiled with webpack.
In firefox, sourcemaps are incorrect when source compiled with both webpack and node-sass
If you need anymore information on this one, let me know.
Thanks in advance for any help/input provided on this one!