Nested SASS always shows parent line

I must confess that this is my first time setting up gulp with gulp-sourcemaps, and I have everything working quite properly it seems, however I am experiencing an issue. My browser dev tools inspector always shows the rule location in the .scss file as being located at the topmost ‘branch’.

For example, my .scss file is as follows:

body {
  background: #33b5e5;
  color: #f0f;

  h1 {
    color: #900;
    background: #bbb;
  }

  p {
    color: #393;
  }
}

…and the web inspector will show that the p { color: #393 } rule is on “Line 1”, where it is actually on “Line 10”. I was troubleshooting this and moved the p rule outside of the body nest, and then the web inspector showed the proper “Line 10” location for that rule.

My gulp task is as follows (I am using gulp-sass):

...
    .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('.', {includeContent: false, debug: true}))
...

I just can’t get these nested rules to work properly. For posterity’s sake, here’s my source map file when said p rule was nested under body:

{"version":3,"sources":["global.scss"],"names":[],"mappings":"AAAA,IAAI,CAAC;EACH,UAAU,EAAE,OAAQ;EACpB,KAAK,EAAE,IAAK,GAMb;EARD,IAAI,CAIF,EAAE,CAAC;IACD,KAAK,EAAE,IAAK;IACZ,UAAU,EAAE,IAAK,GAClB;;AAGH,CAAC,CAAC;EACA,KAAK,EAAE,IAAK,GACb","file":"global.css"}

I apologize for having to ask this question, but I am so close, as everything is working very nicely with exception to locating exact rules in my .scss file.

Thanks in advance for any help!!

[cyphix333]

@nmccready Can I ask why this is closed when the issue still exists?

[SenHengDesamis]

I’ve been having this issue and the only way I’ve managed to fix it is to run both autoprefixer and cssNano together. I’d prefer to not minify when local dev because there’s a legacy stylesheet with 20k lines in it… but this was the only thing that worked.

Maps work perfectly fine in Chrome, a little bit funky in FF (sometimes goes to closing bracket) and breaks in Safari (Goes to parent).

const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const gulpIf = require('gulp-if');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const nano = require('cssnano');

const processors = [
  autoprefixer({browsers: ['last 2 version']}),
  nano(),
];

gulp.task('sass', () =>
  gulp.src(config.main)
    .pipe(gulpIf(env === 'dev', sourcemaps.init()))
    .pipe(sass(config.settings))
    .on('error', handleErrors)
    .pipe(postcss(processors))
    .pipe(gulpIf(env === 'dev', sourcemaps.write()))
    .pipe(gulp.dest(config.dest))
);

versions

"autoprefixer": "^7.1.5",
"cssnano": "^4.0.0-rc.2",
"gulp": "3.9.1",
"gulp-postcss": "^7.0.0",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.1",