单个文件上的scs的Gulp Sourcemaps

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/'));
});

Answer 1

There are two issues:

1. 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

2. 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/'));
});