sass-loader creating broken paths in sourcemap

[Stephen2]

Hey all, I'm stumped, can anyone help? Sourcemaps are pointing at broken paths

See how it's doubling up the paths, some with forward slash, some with backslash? I'm on Windows...

When I replace sass-loader with just css-loader, or even post-css-loader + css-loader, sourcemaps work, so that's why I think it's sass-loader

Not sure what else will be helpful, so here's the full webpack config:

const path = require('path');
const webpack = require('webpack');

module.exports = (env) => {
  const isProduction = env === 'production';

  const config = {
    devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
      }
    },
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'app.js',
      publicPath: 'http://localhost:8080/'
    },
    devtool: isProduction ? '' : 'cheap-module-eval-source-map',
    module: {
      rules: [{
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          'babel-loader',
          'eslint-loader'
        ]
      }, {
        test: /\.scss$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader', options: { sourceMap: true, importLoaders: true } }, // ,
          { loader: 'postcss-loader', options: { sourceMap: 'inline' } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]
      }, {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      }, {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      }]
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(isProduction ? 'production' : '')
        }
      })
    ]
  };

  return config;
};

[michael-ciniawsky]

@Stephen2 webpack-contrib/css-loader#532

⚠️ If you use { loader: 'postcss-loader', options: { sourceMap: 'inline' } } the source map is inlined in the CSS as an annotation comment by postcss-loader, therefore css-loader doesn't have any effect on the map anymore

[Stephen2]

Thanks @michael-ciniawsky, I've been playing with kinds of combinations, but the basic one that seems sensible is:

test: /\.scss$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]

So if I understand this right, this is a known issue and the fix seems to be close to accepted. If that's not correct, let me know, and thanks again for helping.

[michael-ciniawsky]

{ loader: 'style-loader', options: { sourceMap: true } }

It's on master (css-loader) now and a release should be underway, yes it's a known issue if you have a few minutes, you could try if it works for you by npm i -D webpack-contrib/css-loader

Feedback would be appreciated 😛

[Stephen2]

test: /\.scss$/,
        use: [
          { loader: 'style-loader', options: { sourceMap: true } },
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]

Installed css-loader 0.28.2 and now I'm getting different behaviour, but I'm not sure which combination of my initial testing being at 2AM, the new change, mistakes in my testing?? etc...

Here's the behaviour:

• Style Loader & css loader only = paths good
• Add postcss loader = paths bad
• Add sass-loader = paths still bad
• Remove postcss loader = paths good!

So, now I'm suggesting that it's only the presence of postcss loader that is causing this problem to still be present.

Don't know if that helps or has just confused everything...

[michael-ciniawsky]

remove postcss loader = paths good!

Just to clearify, you mean with sass-loader applied? (style-loader!css-loader!sass-loader) 😛

Don't know if that helps or has just confused everything...

No no the opposite 🙃 , it's appreciated, could you post some info on what is off, when postcss-loader is used, so I can fix it there :)

[Stephen2]

Yes, style!css!sass is doing correct paths now.

But with postcss = paths no good

        test: /\.scss$/,
        use: [
          { loader: 'style-loader', options: { sourceMap: true } },
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]

Interestingly (or maybe expected behaviour?) testing this out (note post-css sourcemap: false):

        test: /\.scss$/,
        use: [
          { loader: 'style-loader', options: { sourceMap: true } },
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'postcss-loader', options: { sourceMap: false } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]

Yields the expected warning, AND the sourcemap paths work?? But also the autoprefixer hasn't been run:

[michael-ciniawsky]

I see now, likely need to remove the path.resolve() part in postcss-loader I added in v2.0.0 😅. Thx I close the issue here and fix it in postcss-loader as soon as possible

[markthiessen]

@michael-ciniawsky any progress on this? I'm running into the same issue

[maximpn]

And me too. Why do we have absolute path not relative in the source map?

[alexander-akait]

@katzz0 no, seems your configuration invalid, can your show configuration?

[maximpn]

This is my configuration of loaders for scss:

{
    test: /\.scss$/,
    exclude: [/\.inline\.scss$/],
    loader: [
        "style-loader",
        {
            loader: "css-loader",
            options: {
                sourceMap: true,
                minimize: true
            }
        },
        {
            loader: "postcss-loader",
            options: {
                sourceMap: true,
                plugins: function () {
                    return [
                        require("autoprefixer")({
                            browsers: ["last 4 versions"]
                        })
                    ];
                }
            }
        },
        "resolve-url-loader",
        {
            loader: "sass-loader",
            options: {
                sourceMap: true
            }
        },
        "sass-bulk-import-loader"
    ]
},

And versions:
"style-loader": "^0.13.1"
"css-loader": "^0.28.4",
"postcss-loader": "^2.0.5",
"autoprefixer": "^7.1.1",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.5",
"resolve-url-loader": "^2.0.2",

And as result I have files routes like C:\...C:\...C:\... which seems wrong. I'd like to have relative paths.

I also tried { loader: 'style-loader', options: { sourceMap: true } } but it changes nothing.

[alexander-akait]

@katzz0 seems resolve-url-loader not works as expected. I don't recommendation usage this loader.
Why?

1. He seems abandoned.
2. He use rework (abandoned).

[maximpn]

But it's specified in the documentation for sass-loader that it properly processes url in styles and needed for sass loader. I'll try without it and let know about results.

[alexander-akait]

@katzz0 At the time of writing it was not abandoned, now there is no alternative, so he stayed in README. I don't use resolve-url-loader loader in my projects and all works fine.

[maximpn]

I tested without resolve-url-loader and there are two parts only C:\...C:\... or one when I remove postcss-loader.

What can I do to force using relative routes to my source files not absolute? It specifies relative paths like src/app/some-file.ts for my TypeScript files but for scss files I have absolute paths and it's really inconvenient to look at file names in the Chrom dev tool.

[michael-ciniawsky]

@katzz0 The relevant lines are here, could you comment them out in your local version of postcss-loader (node_modules) and please confirm that source map(pings) are still working correctly ? I added these lines as it's recommended to have provide absolute paths to webpack for correct source mappings

[maximpn]

I tried to comment lines but it doesn't change anything. I tryed to walk through the process of modification source maps and it seems that css-loader adds additional part see here.

[maximpn]

sourceMap: false helps for routes but I get a lot of warning from postcss inthis case.

[kucukkanat]

I solved it like this :

rules: [
      {
        test: /\.scss$/,
        use: [
          {
            options: { sourceMap: true },
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            options: { sourceMap: true },
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "resolve-url-loader" // translates CSS into CommonJS
          },
          {
            options: { sourceMap: true },
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      },
      ...

added resolve-url-loader in between now my paths are not doubled.
But I dont have any idea how it solved the issue

[ds-codemag]

I'm embarrassed. I have this issue for a long time. I have path C:...C:...C:... like @katzz0. I waiting for someone fix this but i dont se results. I read a lot of threats about this issue and @michael-ciniawsky pretends that nothing is happening ;/

[kucukkanat]

I have moved away using sass loader to styled-components for react and vue scoped styles. If only I had the enough knowledge would love to contribute but too late already

[kyle-ssg]

Hey all, I managed to get this to work finally via the following workaround
node_modules/sass-loader/lib/loader.js

 result.map.sources = result.map.sources.map((p)=>{
                return "file://"+process.cwd()+"/"+path.normalize(p)
            });

Note the file, and making it absolute are both important in this case.

[alexander-akait]

@kyle-ssg invalid solution, you break source map in many cases

[kyle-ssg]

Right now it's broken anyway, in all cases, unless I'm missing something? And anyway, I did say it was a workaround.

[alexander-akait]

@kyle-ssg what is broken? Issue was closed because it was fixed

[kyle-ssg]

@evilebottnawi gotcha, I'll open a new issue and reference this here.