Files removed from source map

[cevou]

If I use the resolve-url-loader files which don't contain any code are somehow removed from the sourcemap.

Look at my example project: https://github.com/cevou/getting-sourcemaps-right You can run the build with npm run build

I commented the lines which require resolve-url-loader so that the build runs with and without the loader.

Without resolve-url-loader the file in the sourcemap look like this:

You can see that there is a variables.scss file.

If I add resolve-url-loader to the loader chain (webpack.config.prod.babel.js) this file is not there anymore:

I think that this is not an issue with resolve-url-loader itself but rather by rework which does the source map manipulation. It look like rework is not maintained anymore. Maybe it should be considered to use postcss to do the manipulation instead.

[bholloway]

I'm my experience, variables do not contribute to sass source map entries.

If you make a URL statement with a variable it will not work as you expect.

This is a limitation we encountered previously.

[cevou]

Are you sure about that? Is this documented somewhere?

This is what goes into resolve-url-loader

CSS:

body {
    font-family: "Open Sans", Arial, sans-serif; }

.test {
    display: flex;
    background-color: #ff9900;
    width: 500px;
    height: 500px; }

Map

{
  "version": 3,
  "file": "getting-sourcemaps-right\\src\\components\\Test.scss",
  "sources": [
    "components\\Test.scss",
    "styles/styles.scss",
    "styles/variables.scss"
  ],
  "sourcesContent": [
    "@import \"../styles/styles\";\r\n\r\n.test {\r\n  display: flex;\r\n  @include background();\r\n  width: 500px;\r\n  height: 500px;\r\n}\r\n",
    "//Import fonts currently disabled to fix error in resolve-url-loader\r\n//@import \"~open-sans-fontface/sass/variables\";\r\n//@import \"~open-sans-fontface/sass/mixins\";\r\n//@import \"~open-sans-fontface/sass/_Regular\";\r\n//@import \"~open-sans-fontface/sass/_Bold\";\r\n@import \"variables\";\r\n\r\nbody {\r\n  font-family: \"Open Sans\", Arial, sans-serif;\r\n}\r\n\r\n@mixin background {\r\n  background-color: $testColor;\r\n}",
    "$testColor: #ff9900;"
  ],
  "mappings": "ACOA,AAAA,IAAI,CAAC;EACH,WAAW,EAAE,8BAA+B,GAC7C;;ADPD,AAAA,KAAK,CAAC;EACJ,OAAO,EAAE,IAAK;ECSd,gBAAgB,ECZN,OAAO;EFKjB,KAAK,EAAE,KAAM;EACb,MAAM,EAAE,KAAM,GACf",
  "names": [],
  "sourceRoot": ".."
}

You can visualize the source map here: https://sokra.github.io/source-map-visualization/#custom Click on custom and upload the two files. You will see that the variable is mapped correctly.

[bholloway]

I am sorry this issue has languished. I think this is fundamentally limited by the CSS parser, which was rework.

Please refer to #97 as the situation may be improved with postcss.