Gulp inline sourcemaps not working

Question

I'm trying to get the sourcemaps to work with Gulp. I'm using gulp-ruby-sass and gulp-sourcemaps.

The inline sourcemap gets inserted in the CSS file but it still doesn't work in Chrome even though I've enabled sourcemaps. I can still only see the references to the CSS file and not the sass files.

This is the sass task in my gulpfile:

gulp.task('sass', function() {
    return sass('src/sass/main.scss', { sourcemap: true, style: 'expanded' }) 
    .on('error', function (err) {
        console.error('Error!', err.message);
    })
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist/assets/css/'))
    .pipe(connect.reload());
});

The inline sourcemap in my CSS file looks like this:

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5jc3MiLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJtYWluLmNzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIubmF2aWdhdGlvbi1tYWluX19saXN0IHtcclxuICBkaXNwbGF5OiBpbmxpbmU7XHJcbiAgcGFkZGluZzogMDtcclxuICBtYXJnaW46IDA7XHJcbn1cclxuXHJcbi5uYXZpZ2F0aW9uLW1haW5fX2l0ZW0ge1xyXG4gIHBhZGRpbmc6IDAgMTBweDtcclxuICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XHJcbiAgZGlzcGxheTogaW5saW5lO1xyXG59XHJcbi5uYXZpZ2F0aW9uLW1haW5fX2l0ZW06Zmlyc3Qge1xyXG4gIHBhZGRpbmctbGVmdDogMDtcclxufVxyXG4ubmF2aWdhdGlvbi1tYWluX19pdGVtOmxhc3Qge1xyXG4gIHBhZGRpbmctcmlnaHQ6IDA7XHJcbn1cclxuXHJcblxyXG4iXSwic291cmNlUm9vdCI6Ii9zb3VyY2UvIn0= */

I decoded the base64 into this:

{"version":3,"file":"main.css","names":[],"mappings":"","sources":["main.css"],"sourcesContent":[".navigation-main__list {\r\n  display: inline;\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.navigation-main__item {\r\n  padding: 0 10px;\r\n  list-style-type: none;\r\n  display: inline;\r\n}\r\n.navigation-main__item:first {\r\n  padding-left: 0;\r\n}\r\n.navigation-main__item:last {\r\n  padding-right: 0;\r\n}\r\n\r\n\r\n"],"sourceRoot":"/source/"}

Does this look right? I'm not sure how it's meant to look but I would have thought the scss filename references should be in there?

Just can't get it to work!

Heikki Heikki · Accepted Answer · 2015-02-19T20:47:13

Try removing this:

.pipe(sourcemaps.init())

I assume you're using the 1.0.0-alpha.x version of gulp-ruby-sass:

https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0#sourcemap

Gulp inline sourcemaps not working

1 Answers