Gulp sourcemaps for scss on single file

Question

sass scss/_bootstrap.scss style.css

Above code generates properly with sourcemaps but not the below code

gulp.task('sass', function () {
    sass('scss/_bootstrap.scss', {sourcemap: true})
        .on('error', function (err) {
            console.error('Error!', err.message);
        })
        .pipe(sourcemaps.write())
        .pipe(debug())
        .pipe(autoprefixer())
        .pipe(gulpif(mode === 'prod', minifyCss()))
        .pipe(rename("style.css"))
        .pipe(gulp.dest(dest+'css/'));
});

You getting any error ? Did you required gulp-sourcemap? – Jakub Juszczak May 26 '15 at 12:08 — Jakub Juszczak, May 26 '15 at 12:08

score 1 · Answer 1 · answered May 26 '15 at 15:47

There are two issues:

You have multiple changes after your Sass compilation, but you write the sourcemaps directly after your Sass task. Autoprefixer and MinifyCSS change your output, so the original sourcemaps are not true anymore. Put the sourcemaps.write() call to the bottom of your pipe
Unfortunately, gulp-minify-css sometimes has issues with Sourcemaps. I'd suggest to use the built-in compression process from Sass (even though it's not usually recommended.

This code will work:

gulp.task('sass', function () {
    return sass('bower_components/sass-bootstrap/lib/bootstrap.scss', {
            sourcemap: true,
            style: (mod === 'prod' ? 'compressed' : 'nested')
        })
        .on('error', function (err) {
            console.error('Error!', err.message);
        })
        .pipe(debug())
        .pipe(autoprefixer())
        .pipe(rename("style.css"))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('css/'));
});

Gulp sourcemaps for scss on single file

1 Answers1