Using sourceMap with sass-resources-loader

[Igor-Vuk]

Hi guys. I am using sourceMap and sass-resources-loader together. Everything works fine but there is a problem with line number when looking at my source code.

For example. This is the code when looking in code console

1  $lightblue: #00D8FF;
2  $blue: #2C3949;
3  $gray: #333333;
4.  /* Home scene */
5.  $text-color: $lightblue;
6. .container {
7. .align-center {
8.      text-align: center;
9.  }

And this is my code

1.  /* Home scene */
2.  $text-color: $lightblue;
3. .container {
4. .align-center {
5.      text-align: center;
6.  }

Since sass-resources-loader imports my variables at the top I get incorect line number in console. How do I resolve this?

This is my config in webpack

{
        test: /\.local\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
          'postcss-loader?sourceMap',
          'sass-loader?sourceMap',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                path.resolve(__dirname, './src/client/styles/scss/variables.scss'),
              ],
            },
          },
        ],
      },

[Igor-Vuk]

Still no workaround or solution for this?

[Pa-wN]

Me too.

[justin808]

I'm pretty sure that the problem is solvable, but it would take some work. I'm open to a PR.

[betorobson]

I found a solution, in sass-loader you must add option 'outputStyle: 'compressed'.

Example

{
	loader: 'sass-loader',
	options: {
		sourceMap: true,
		outputStyle: 'compressed',
	}
},

[amatiash]

I found a solution, in sass-loader you must add option 'outputStyle: 'compressed'.

Example

{
	loader: 'sass-loader',
	options: {
		sourceMap: true,
		outputStyle: 'compressed',
	}
},

Doesn't work for me. Even with new config:
{loader: 'sass-loader', options: {sourceMap: true, sassOptions: {outputStyle: 'compressed'}}}

[rnogueira-namoadigital]

there is no "sassOptions", flat it to "options"

{
	loader: 'sass-loader',
	options: {
		sourceMap: true,
		outputStyle: 'compressed',
	}
}

[amatiash]

there is no "sassOptions", flat it to "options"

{
	loader: 'sass-loader',
	options: {
		sourceMap: true,
		outputStyle: 'compressed',
	}
}

Yes, there is. In Webpack 4.

[rnogueira-namoadigital]

this is not related to webpack, only sass-loader.
When I wrote this solution, it was for sass-loader v7, now it is v10 and webpack is v5.
I suggest you to update both to the last verion.

Which version of sass-loader are you using?

[rnogueira-namoadigital]

Also here in documentation, you can see a note about some issues to generate source-map.
https://github.com/webpack-contrib/sass-loader#sourcemap

Which says:
ℹ In some rare cases node-sass can output invalid source maps (it is a node-sass bug).

In order to avoid this, you can try to update node-sass to latest version or you can try to set within sassOptions the outputStyle option to compressed.

[amatiash]

Thanks for clarification. I'm using "sass-loader": "^8.0.2".