Weird source map paths when used together with sass-loader

[woldner]

Do you want to request a feature or report a bug?
Bug report

What is the current behavior?
Wrong source map/resource paths using css-loader together with sass-loader as shown below:

Examples of source map paths using the plugin
The actual app.scss path is ./src/styles/app.scss

However the source map path for the file becomes ./src/styles/src/styles/app.scss and the absolute resource path: C:/Users/m51n/source/repos/source-map-path/src/styles/src/styles/app.scss (does not exist)

If the current behavior is a bug, please provide the steps to reproduce.
I've created a sample project here-- using the source map example from the sass-loader docs and code from the extract-text-webpack-plugin docs here

With the sample project above I used devtool: "inline-source-map".

What is the expected behavior?
Expected source map path returned by the plugin in this case would be ./src/styles/app.scss and absolute resource path as it exist on disk: C:/Users/m51n/source/repos/source-map-path/src/styles/app.scss

Related issues for reference
webpack-contrib/sass-loader#484

Please mention other relevant information such as your webpack version, Node.js version and Operating System.

webpack v3.10.0
node v9.2.0
os: windows 10

[dcatoday]

Hi I am seeing an issue using ~paths. The path is returned without any deliminating /'s in the url.

[Songworks]

Came upon the same today with having duplicate-ish paths in sourcemaps.
Here's the relevant loaders in my config (no ExtractTextPlugin and devtool as source-map):

  [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
      },
    },
  ];

To me it seems like sass-loader uses the style file path relative to the current working directory and css-loader uses that same path as just a filename (rather than considering it a proper path?) and prepends the absolute path of the directory where the style file is imported from (regardless if it's by another style file or javascript)?

As a quick example, two files:
/cwd/src/styles/core.scss
/cwd/src/components/bla/styles.scss

Both will be imported by another file within /cwd/src/components/bla.

Sourcemap for core.scss will have the path:
/cwd/src/components/bla/src/styles/core.scss
Sourcemap for styles.scss will have the path:
/cwd/src/components/bla/src/components/bla/styles.scss

[woldner]

@Songworks see webpack-contrib/sass-loader#529
@evilebottnawi promised that he would have a look in the near future 🔎

[alexander-akait]

Just for information - reproducible test repo https://github.com/jwldnr/extract-text-issue

[mattmewton]

I'm having this issue as well. Any update as to when it will be resolved?

[woldner]

ping @evilebottnawi

[alexander-akait]

@jwldnr sorry for delay, don't have time for this right now, PR welcome 👍