nested styles refer to top-level parent in sourcemap line number #272

woohling · 2016-08-24T10:21:32Z

I encountered the same issue in sass/node-sass#1206.
But according to this post, this issue has been fixed in node-sass, but it still occurred with sass-loader.

This is my sass-loader config: 'style!css?sourceMap!sass?sourceMap=true&outputStyle=expanded&sourceMapContents=true'

Any help?

The text was updated successfully, but these errors were encountered:

ggedde · 2016-10-28T22:10:37Z

Mac OSX (El Capitan?)
"sass-loader": "^4.0.2",
"webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^2.1.0-beta.0"
node: 6.7.0

When running the SCSS SourceMaps only point to the Parent selector and not the correct selector.

But as you can see it is not pointing to the correct selector. It should be pointing to line 13 not line 5.

However,
If I run 'node-sass' in the terminal then it works fine. So it seems to be an issue with sass-loader and webpack.

Any solutions to resolve this or is there any settings in node-modules/sass-loader that I can change to get different results.

Thanks

folmert · 2016-11-24T11:05:08Z

Same problem here. Did anyone found a workaround for this?

jhnns · 2016-11-25T14:45:40Z

CSS source maps can only work if every loader in the loader chain passes them through. That's necessary because webpack, only supports JS source maps out of the box.

@woohling Do you experience the same issue when you use this loader chain:
style-loader?sourceMap!css-loader?sourceMap!sass?sourceMap&outputStyle=expanded&sourceMapContents=true'
?

woohling · 2016-11-25T15:00:08Z

Just tried, but still the same problem. 😥 @jhnns

folmert · 2016-11-26T11:58:23Z

I switched from sass-loader to postcss/precss and source maps are generated correctly now, so there must be something broken in sass-loader.

maximusnikulin · 2016-12-28T05:53:03Z

Did anyone solve this problem?

pgayvallet · 2017-01-04T16:51:31Z

Same issue here. @import makes sourcemap point to the parent file.

jhnns · 2017-02-13T18:37:05Z

I can confirm the problem. You can test that with ce198d1 and npm run test-source-map.

Unfortunately, I don't know how to fix this since we don't actually mess with the source maps.

ggedde · 2017-02-13T19:54:52Z

@jhnns Could you explain more on "we don't actually mess with the source maps". Are you saying that sass-loader doesn't create the source maps. If so then what does and how?
As mentioned running "node-sass" in the terminal the source maps are fine, but running it though sass-loader and webpack they are not.

Sorry I am not too familiar with sass-loader flow. Could someone explain the difference that running sass-loader through webpack has as compared to running node-sass through the terminal.

It almost seems like the scss file is converted to (nested, expanded, or compact) prior to the source map is being applied then the css is compressed.

Is there any way to test that sass-loader is getting the full un-compacted un-compressed scss files when creating the source mappings?

jhnns · 2017-02-14T10:55:54Z

We receive the source maps directly from node-sass. But since the source maps are also processed by the css-loader and other loaders on the way, it's hard to say what's going on. Maybe they are incompatible?

It would be good if you could investigate this. Build the smallest project possible that reproduces the error and inspect the source maps in the sass-loader and then in the css-loader. You can use the style-loader to apply the styles to the DOM. The style-loader uses a BLOB url to make the source maps available to the browser. It does not change the source maps anymore, so that should be fine.

alexander-akait · 2017-05-03T14:59:32Z

@woohling @maximusnikulin @wayofspark @ggedde The problem still exists? If yes please create minimal reproducible test repo

woohling · 2017-05-04T03:48:42Z

No longer working on the project with this issue.
But I will find time to create a small demo to see if the problem still exists.

alexander-akait · 2017-05-04T09:18:45Z

@woohling just ping me when your do this 👍

ggedde · 2017-05-09T09:40:06Z

Sorry @jhnns @evilebottnawi, I took a pause from this project.
Nope, the issue still exists for me. I also just recently installed brand new ng-cli on a new laptop.
Angular4.0 with CLI 1.0.2 which is using sass-loader 6.0.3

I created a small project and just had a few lines of scss code.
It still pointed to the top parent node, but running node-sass works fine.
Not sure what I can do to help further.

alexander-akait · 2017-05-09T12:56:44Z

@ggedde can your create minimal reproducible test repo?

ggedde · 2017-05-09T17:34:01Z

@evilebottnawi
Yes, I can. I will let you know when I get that up.

In the meantime I did find that if I added
outputStyle: 'compressed' to the sass-loader it now works for Chrome, but not FF.

So my guess is that css-loader is expecting the sass-loader to be compressed. So if sass-loader is not then you need to specify it. I am not sure how to have css-loader know what the format is. That way you wouldn't have to specify it.

So this may be an issue with css-loader and not sass-loader.

I will look at it again later tonight.

alexander-akait · 2017-05-09T17:39:37Z

@ggedde seems bugs not in sass-loader or css-loader (it makes no difference what we work on sass/scss/less and etc.). I think FF have bug, just ping me when test repo was created.

ggedde · 2017-05-09T17:59:53Z

Yes, FF has a bug, but Chrome doesn't work either unless you add outputStyle: 'compressed' to sass-loader. There may not be a bug with either, but there is definitely a configuration issue that is not well documented anywhere. Nor does anyone have a good grasp on how to configure css-loader with sass-loader to make the sourcemaps work properly. It would be great for us to figure it out then either someone from the sass-loader team or css-loader team right a blog post about it explaining the reasons why and how to properly configure webpack to output the correct sourcemaps. I will definitely do what I can to support it.

sandwich · 2017-07-23T10:28:01Z

I may be reading things incorrectly here, but I think y'all might be barking up the wrong tree if you're looking for the origin of the problem to be in sass-loader (assuming sass-loader is a webpack-specific thing).

See, I have this exact issue, of sourcemaps not referencing the right line if the @import is within a CSS selector. However, I'm using gulp—gulp-sass, gulp-sourcemaps, etc—not webpack.

Does this help any?

alexander-akait · 2017-07-26T12:03:34Z

@sandwich can your provide minimum reproducible test repo?

sandwich · 2017-07-30T11:30:30Z

Here ya go (not precisely minimum; I wanted it to be self-explanatory, too). Once extracted, run npm install, and then just gulp.

Reproducible in Chrome, Firefox, IE11, and Edge (i.e. it's not a browser issue).

Sourcemap Import Issue.zip

aszmyd · 2017-08-11T07:49:49Z

I've made an reproducible test repo using webpack - https://github.com/aszmyd/webpack-sass-loader-sourcemap-issue
Just clone it, npm install, npm start and open browser at http://localhost:8080/

The issue is present there:

Even using outputStyle: 'compressed' its still broken.

alexander-akait · 2017-08-11T08:35:37Z

@aszmyd thanks, in near future i try to investigate this!

alexander-akait · 2017-08-15T18:16:41Z

@aszmyd invalid configuration.
Fixed (invalid source map path):

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

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    context: path.resolve('src'),
    entry: './index.js',
    output: {
        filename: 'index.js',
        path: __dirname + '/dist'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                            // outputStyle: 'compressed'
                        }
                    }]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'styles/index.css'
        }),
        new HtmlWebpackPlugin(
            {
                filename: 'index.html',
                template: './index.html'
            })
    ]
};

In your test repo i have correct position. Can your provide more information your node version, npm, OS and etc?

alexander-akait · 2017-08-15T18:22:11Z

@sandwich your use gulp not webpack, how it is related to issue? Thanks!
@woohling friendly ping
@ggedde can your provide minimum reproducible test repo?

alexander-akait · 2017-08-15T18:30:05Z

@aszmyd reproduce, thanks, looking. Tomorrow I will write what was the problem

sandwich · 2017-08-15T18:38:36Z

@evilebottnawi Perhaps you missed my earlier post. I have the exact same issue, except I'm not using webpack, but gulp. Therefore, there's a decent chance that the issue is not in anything specifically related to webpack, but is rather in Sass or the Sass Sourcemaps code, since that's the only common denominator.

aszmyd · 2017-08-16T05:39:52Z

@sandwich i get Your point. I've tried to reproduce the same issue with using just node-sass but with no luck - test repo here.

sandwich · 2017-08-16T06:48:51Z

@aszmyd I have a test case as a zip up above, using gulp-sass and the like.

alexander-akait · 2017-08-16T09:59:50Z

@sandwich @aszmyd thanks for helping!
@sandwich I'm inclined to assume that you are right, since we do not make any modifications with the source maps in the sass-loader

aszmyd · 2017-08-16T10:34:59Z

@sandwich i've checked You'r code and figured out that the part that is messing around with things is gulp-postcss together with autoprefixer. When i commented this one .pipe(postcss([ autoprefixer() ])) line in Your gulpfile, sourcemap points correctly to _typography.scss line 7.

So changed sass task that works:

gulp.task('sass', function()
{
	gutil.log("Now compiling all SCSS files...");
	return gulp.src('scss/**/*.scss')
		.pipe(plumber(plumberErrorHandler))
		.pipe(sourcemaps.init())
		.pipe(sass())
		// .pipe(postcss([ autoprefixer() ]))
		.pipe(sourcemaps.write('.').on('end', function()
			{
				gutil.log("	...done generating sourcemaps.");
			})
		)
		.pipe(
			gulp.dest('public_html/css')
		)
		.pipe(browserSync.reload({
			stream: true
		}));
});

So my guess is that its more sass-loader/webpack related. @evilebottnawi were You able to figure out something from my reproducable repo?

alexander-akait · 2017-08-16T10:35:54Z

@aszmyd doing at this moment 😄

alexander-akait · 2017-08-16T10:39:30Z

Btw seems bug did not located in sass-loader (sass/node-sass#1206)

alexander-akait · 2017-08-16T11:05:44Z

@woohling @ggedde @folmert @wayofspark @sandwich @aszmyd won't fix in sass-loader 😞

Information about why this happens: sass/libsass#1747 (comment) and sass/libsass#1747 (comment).

In short: browsers always show first selector in sequence nested selectors in source maps. I am closing this issue here because it is not related to sass-loader and we don't have time to fix this in other packages (libsass) which not related directly to webpack. Your can create new issue or write post in sass/libsass#1747 if your think it is can be fixed.

Btw your can click in dev tools on property to move in right position in source maps.

aszmyd · 2017-08-17T04:33:49Z

@evilebottnawi im not sure this is the right decision. sass-loader is using node-sass. node-sass is:

a library that provides binding for Node.js to LibSass

And in one of my earlier posts i've created small repo that uses only node-sass and it works perfectly fine.

So question is - why pure node-sass is working properly but sass-loader that is using it underneath, is not?

alexander-akait · 2017-08-17T09:43:21Z

@aszmyd your can look loader code, we don't modify source map from node-sass.
Just confirm:

console.log(result.map.toString()) in https://github.com/webpack-contrib/sass-loader/blob/master/lib/loader.js#L60
Output:

{
        "version": 3,
        "file": "stdin.css",
        "sourceRoot": "/home/evilebottnawi/IdeaProjects/webpack-sass-loader-sourcemap-issue",
        "sources": [
                "stdin"
        ],
        "sourcesContent": [
                "html {\n    background: rgba(0, 0, 0, 0.7);\n}\n\nbody {\n\n    h1 {\n        color: white;\n    }\n}\n"
        ],
        "names": [],
        "mappings": "AAAA,AAAA,IAAI,CAAC;EACD,UAAU,EAAE,kBAAkB,GACjC;;AAED,AAEI,IAFA,CAEA,EAAE,CAAC;EACC,KAAK,EAAE,KAAK,GACf"
}

Open in chrome or mozilla http://127.0.0.1:8080/styles/index.css.map
Output:

{
"version":3,
"sources":["webpack:///./src/src/index.scss"],
"names":[],
"mappings":"AAAA;EACI,+BAA8B,EACjC;;AAED;EAGQ,aAAY,EACf",
"file":"styles/index.css",
"sourcesContent":["html {\n    background: rgba(0, 0, 0, 0.7);\n}\n\nbody {\n\n    h1 {\n        color: white;\n    }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/src/index.scss"],"sourceRoot":""}

Seems something invalid in mappings, but it is not sass-loader, let's investigate this, thanks!

alexander-akait · 2017-08-17T10:08:46Z

@aszmyd something wrong in css-loader 😞

Add style-loader to webpack.config.js

 loaders: [
            {
                test: /\.scss$/,
                /*use: ExtractTextPlugin.extract({*/
                    use: [{
                        loader: 'style-loader',
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                            // outputStyle: 'compressed'
                        }
                    }]
               /* })*/
            }
        ]

Open https://github.com/webpack-contrib/css-loader/blob/master/lib/loader.js#L114 (in node_modules/css-loader)
Comment lines

/*map = result.map;
			if(map.sources) {
				map.sources = map.sources.map(function(source) {
					return source.split("!").pop().replace(/\\/g, '/');
				}, this);
				map.sourceRoot = "";
			}
			map.file = map.file.split("!").pop().replace(/\\/g, '/');*/

Run npm run start and your can see that source map is valid

alexander-akait · 2017-08-17T10:18:54Z

Problem in postcss, which using in css-loader, I'll try to update postcss to the latest version in css-loader and see what happens

alexander-akait · 2017-08-17T10:33:28Z

Closing issue, because not related, sorry, but i can't do anything here 😞
Based issue: postcss/postcss#926
Why it is happens: postcss/postcss#926 (comment)
Workaround: implement own loader which correct this behavior (difficult).

Maybe we can fix this in https://github.com/mozilla/source-map, your can create issue there with examples (prefer where only node-sass and postcss without webpack - easy debug), thanks!

ggedde · 2017-09-02T09:06:32Z

Hi @evilebottnawi ,
Thanks for all the hard work on this. I know you wanted this sooner, but here is my repo:
https://github.com/ggedde/ngtest

It just uses AngularCLI (Requires Node and NPM)

git clone https://github.com/ggedde/ngtest.git
cd ngtest
npm install
npm run start

After NG finishes then Navigate your browser to http://localhost:4200
You will see that if you instead the <h1> that the color points to line 3 in the inspector, but is actually on line 9. This issue is on both Chorme and Firefox.

However, if you add:

outputStyle: 'compressed',

To the sass-loader [options] in "node_modules/@angular/cli/models/webpack-configs/styles.js"
Then it works fine in Chrome, but not Firefox.

Hope this helps others.
Thanks

alexander-akait · 2017-09-02T12:24:22Z

@ggedde thanks!

kevin074 · 2018-12-01T00:32:22Z

{
    test: /\.(css|scss)$/,
     use: [
         { loader:MiniCssExtractPlugin.loader },
         { loader: "css-loader",  options: { sourceMap: true } },
         { loader: "sass-loader", options: { sourceMap: true, outputStyle: 'compressed'} }
    ]
},

currently with this set up the source map would only be pretty darn close to the line in the scss file when I am inspecting through chrome console. Don't know if anyone else is seeing this as well.

    "webpack": "^4.20.2",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "css-loader": "^1.0.0",
    "mini-css-extract-plugin": "^0.4.3",

SweetsXob · 2019-07-10T08:14:54Z

This problem does not seem to be solved now.
It seems less doesn't have this problem

fgblomqvist · 2020-01-23T19:34:17Z

I'm experiencing this issue now as well. Source map always end up referring to the top-level parent instead of to the actual line. Our setup is quite simple:

{
  test: /\.(s?css)$/,
  use: [{
    loader: MiniCssExtractPlugin.loader,
  }, {
    loader: 'css-loader',
    options: {
      sourceMap: true,
    },
  }, {
    loader: 'sass-loader',
    options: {
      sourceMap: true,
    },
  }]
},

Setting sassOptions: { outputStyle: 'compressed' } on sass-loader does not improve the situation. If I do that, the source map will even link to the wrong files (not just wrong lines).

Running node-sass using the CLI works well, it outputs correct source-maps for nested classes no matter which outputStyle is selected.

We're on pretty much the latest version of everything:

"css-loader": "^3.4.1",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"webpack": "^4.41.5",

Any ideas of why this could be happening? I could try to put together a demo repo if needed.
Looks like @evilebottnawi had some insight on this before?

MichaelDWheeler · 2020-10-30T00:07:25Z

This resolved it for me:

 {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                  loader: "css-loader",
                  options: {
                    sourceMap: true,
                    url: false
                  }
                },
                {
                  loader: 'sass-loader',
                  options: {
                    sourceMap: true,
                    sassOptions: {
                      outputStyle: argv.mode === "production" ? "compressed" : "expanded",
                    }
                  }
                }
            ]
          },
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader",
              "style-loader"
            ]
          },

I found it here:
https://github.com/noreading/bootstrap4-webpack-boilerplate/blob/master/webpack.config.js

you may have to pass argv into module.exports like it is on the page I linked.

ggedde mentioned this issue Oct 28, 2016

SCSS SourceMap pointing to the Parent selector only. angular/angular-cli#2826

Closed

burtyish mentioned this issue Jan 19, 2017

Sourcemap broken when @importing inside a css selector #342

Closed

jhnns mentioned this issue Feb 13, 2017

Invalid mapping: Negative column number #351

Closed

jhnns mentioned this issue Feb 15, 2017

Fix incorrect source maps in certain cwds #377

Merged

alexander-akait added the flag: Needs more info label May 3, 2017

alexander-akait mentioned this issue May 23, 2017

Source map is incorrect if passed minimized css code webpack-contrib/css-loader#381

Closed

alexander-akait added flag: Community help wanted priority: 3 (required) severity: 3 (broken) type: Bug labels May 23, 2017

alexander-akait closed this as completed Aug 16, 2017

alexander-akait reopened this Aug 17, 2017

alexander-akait closed this as completed Aug 17, 2017

nested styles refer to top-level parent in sourcemap line number #272

nested styles refer to top-level parent in sourcemap line number #272

Comments

woohling commented Aug 24, 2016

ggedde commented Oct 28, 2016

folmert commented Nov 24, 2016

jhnns commented Nov 25, 2016 • edited Loading

woohling commented Nov 25, 2016

folmert commented Nov 26, 2016

maximusnikulin commented Dec 28, 2016

pgayvallet commented Jan 4, 2017

jhnns commented Feb 13, 2017

ggedde commented Feb 13, 2017

jhnns commented Feb 14, 2017

alexander-akait commented May 3, 2017

woohling commented May 4, 2017

alexander-akait commented May 4, 2017

ggedde commented May 9, 2017

alexander-akait commented May 9, 2017

ggedde commented May 9, 2017

alexander-akait commented May 9, 2017

ggedde commented May 9, 2017

sandwich commented Jul 23, 2017 • edited Loading

alexander-akait commented Jul 26, 2017

sandwich commented Jul 30, 2017 • edited Loading

aszmyd commented Aug 11, 2017 • edited Loading

alexander-akait commented Aug 11, 2017

alexander-akait commented Aug 15, 2017 • edited Loading

alexander-akait commented Aug 15, 2017 • edited Loading

alexander-akait commented Aug 15, 2017 • edited Loading

sandwich commented Aug 15, 2017 • edited Loading

aszmyd commented Aug 16, 2017

sandwich commented Aug 16, 2017

alexander-akait commented Aug 16, 2017

aszmyd commented Aug 16, 2017

alexander-akait commented Aug 16, 2017

alexander-akait commented Aug 16, 2017 • edited Loading

alexander-akait commented Aug 16, 2017

aszmyd commented Aug 17, 2017 • edited Loading

alexander-akait commented Aug 17, 2017

alexander-akait commented Aug 17, 2017 • edited Loading

alexander-akait commented Aug 17, 2017

alexander-akait commented Aug 17, 2017 • edited Loading

ggedde commented Sep 2, 2017 • edited Loading

alexander-akait commented Sep 2, 2017

kevin074 commented Dec 1, 2018 • edited Loading

SweetsXob commented Jul 10, 2019

fgblomqvist commented Jan 23, 2020

MichaelDWheeler commented Oct 30, 2020 • edited Loading

jhnns commented Nov 25, 2016 •

edited

Loading

sandwich commented Jul 23, 2017 •

edited

Loading

sandwich commented Jul 30, 2017 •

edited

Loading

aszmyd commented Aug 11, 2017 •

edited

Loading

alexander-akait commented Aug 15, 2017 •

edited

Loading

alexander-akait commented Aug 15, 2017 •

edited

Loading

alexander-akait commented Aug 15, 2017 •

edited

Loading

sandwich commented Aug 15, 2017 •

edited

Loading

alexander-akait commented Aug 16, 2017 •

edited

Loading

aszmyd commented Aug 17, 2017 •

edited

Loading

alexander-akait commented Aug 17, 2017 •

edited

Loading

alexander-akait commented Aug 17, 2017 •

edited

Loading

ggedde commented Sep 2, 2017 •

edited

Loading

kevin074 commented Dec 1, 2018 •

edited

Loading

MichaelDWheeler commented Oct 30, 2020 •

edited

Loading