單個文件上的scs的Gulp Sourcemaps

Question

sass scss/_bootstrap.scss style.css 

上面的代碼使用Sourcemaps可以正確生成，但是下面的代碼則不能

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

有兩個問題：

1. 你有你的無禮編譯后多次變化，但您直接薩斯任務后寫的sourcemaps。 Autoprefixer和MinifyCSS會更改您的輸出，因此原始的源映射不再適用。 將sourcemaps.write()調用置於管道的底部

2. 不幸的是， gulp-minify-css有時與Sourcemaps有關。 我建議使用Sass內置的壓縮​​過程（即使通常不建議這樣做）。

該代碼將起作用：

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