javascript - 单个文件上的 scss 的 Gulp 源图

Question

sass scss/_bootstrap.scss style.css 

上面的代码使用源映射正确生成，但不是下面的代码

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. 您在 Sass 编译后有多项更改，但您在 Sass 任务之后直接编写源映射。Autoprefixer 和 MinifyCSS 改变了你的输出，所以原来的 sourcemaps 不再是真的了。将sourcemaps.write()呼叫置于管道底部

2. 不幸的是，gulp-minify-css有时 Sourcemap 会出现问题。我建议使用 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/'));
});