Gulp-sass: Getting incorrect path with sourcemaps, am I doing something wrong?

[MattHoneycutt]

I'm very new to this package, so it's quite possible I'm doing something wrong or that it isn't a gulp-sass issue. Any help, or a nudge in the right direction, is greatly appreciated. :)

That said:

I'm using gulp-sass with bootstrap-sass. I'm starting with a simple SCSS file, vendor.scss:

@import "../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import "custom.scss";

My custom.scss:

body {
    background-color: pink;
}

And my gulp task:

gulp.task('css:vendor', function() {
    return gulp.src('./client/features/shared/vendor.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({ outputStyle: 'compressed', sourceComments: 'map' }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist'));
});

Everything builds, the resulting CSS is what I would expect, but the sourcemap is off for the style from my custom.scss. It seems to be "stuck" on the last file that was processed from bootstrap's package:

Any tips or suggestions?

[MattHoneycutt]

I've tried a few different configurations of things, but I'm still getting the same behavior. Any advice?

[zephster]

Have you tried using outputStyle: 'compact' instead of compressed? I have the same issue when I use compressed, but changing it to compact fixes it. I haven't found a proper solution for this issue, because I would prefer to use compressed.

[anthonyhastings]

Yep my fix is the same, had to use compact. No idea why this works.

[Sash-OK]

the problem has not been solved? When i use autoprefixer ,outputStyle: compact does not help, Chrome DevTools shows that all children are on a parent line in the file SCSS

[MattHoneycutt]

outputStyle: compact doesn't work for me, either. :(

[luketeaford]

@Sash-OK If you are running autoprefixer on your outputted Scss, I would expect it to break the associations between rules and the source maps.

[MattHoneycutt]

I'm seeing it break even without autoprefixer, using outputStyle: compact. That doesn't mean autoprefixer isn't breaking things, too, but it isn't the culprit in my case.

[luketeaford]

@MattHoneycutt I think you should change
.pipe(sass({ outputStyle: 'compressed', sourceComments: 'map' }))

to

.pipe(sass({ outputStyle: 'compressed'})) or .pipe(sass())

I haven't payed close attention to Gulp Sass, but now I notice that sourcemaps are a different plugin rather than an option of Gulp Sass. (If this doesn't work, perhaps calling sourcemaps(write()) will fix it?)

[Dellkan]

Also having this issue. Using {outputStyle: 'compact'} instead of {outputStyle: 'compressed'} gives me correct sourceMaps.

[JoshMoreno]

Still waiting for a fix.

@Dellkan , @MattHoneycutt - The first problem is bootstrap _breadcrumbs.scss. I opened an issue over there - https://github.com/twbs/bootstrap-sass/issues/1105

Their variable interpolation value in _breadcrumbs.scss causes libsass to:

1. not compile correctly (don't worry it's just messes up that one line)
2. mess up sourcemaps when the output style is set to compressed

After you fix that issue, it appears that there is something gulp-sass has to fix because node-sass compiles everything fine (after fixing bootstrap issue) when running --output-style compressed --source-map true. I'm trying to come up with a temporary solution, that doesn't involve using a different tool to minify so we can keep the speed gains from libsass, until the issues are resolved.

[JoshMoreno]

@Dellkan @MattHoneycutt I think I spoke too soon. I don't think it's a problem with gulp-sass anymore. I still had postcss running autoprefixer in the stream. When I commented that out and just ran gulp-sass with sourcemaps and outputStyle: 'compressed' it's working fine.

So it seems like the problem is postcss or autoprefixer. Will update as I find out more. The bootstrap breadcrumbs issue still holds true though as it messes up libsass itself.

[chris-sparks]

I can confirm that simply commenting out the .pipe(autoprefixer()) solved my issues with Sourcemaps incorrectly reporting files/line numbers suggesting autoprefixer is the culprit here. I'm not using BS in this instance.

[xzyfer]

This is either an issue with libsass (used by gulp-sass), or another gulp plugin interfering.

Comment out all other gulp-plugins. If the issue persists open an issue with libsass.

[andywarren]

Just wanted to add to this as well. I also have the issue with sourcemaps not matching up correctly, and can also confirm it is strictly happening when the outputStyle: 'compressed' option is passed in. When changing it to outputStyle: 'compact' the sourcemaps again match up correctly. I'd really like to be able to have the stylesheet completely minified though.

[JoshMoreno]

For anyone digging around, the issue isn't with gulp-sass.

It's a known issue. Libsass (maybe node sass) seems to still have a bug - https://github.com/sass/node-sass/issues/957

Also, PostCSS isn't fully compatible with sass sourcemaps and the issue has been closed as won't fix (though he tried 👍) - https://github.com/postcss/postcss/issues/926