Skip to content

Sourcemaps pointing to wrong file #1078

Closed
@JParkinson1991

Description

@JParkinson1991
  • 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
webpack sourcemap - broken

node-sass generated sourcemap - working - chrome browser
Screenshot 2019-06-26 at 15 29 37

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions