sass - Gulp を使用して SASS から生成された縮小された CSS をデバッグするために、完全に機能するソースマップを持つことは可能ですか?

Question

Gulp を使用して、元の SASS ファイルを指すソースマップを使用して SASS からトランスパイルされた CSS を生成できます。また、縮小された CSS をデバッグするためのソースマップを生成することもできますが、これまでのところ、その方法を理解できていません (可能な場合もあります) Gulp を使用してソースマップを生成することで、SASS からトランスパイルされて縮小された CSS をデバッグでき、ベンダープレフィックスなどを追加することもできます。トランスパイルとミニフィケーションの両方を実行すると、.scss ファイルが生成されます。

以下のこのコードは、ブラウザーが取得して読み取る出力としてソースマップを生成しますが、前に述べたように、Chrome デバッグ ツールは元の .scss ファイルの間違ったファイル/行を指しています。

これが私の css-compile Gulp タスクです。

// compile SASS

'use strict';

var gulp 			= require('gulp'),
	gutil 			= require('gulp-util'),
	plugins 		= require('gulp-load-plugins')(),
	browserSync 	= require('browser-sync'),
	config 			= require('../config/css-compile.json'),
	isStaging 		= true,
	isProduction 	= false;

gulp.task(config.taskName, function () {
	return gulp.src(config.dirs.src)
        .pipe(plugins.sourcemaps.init())
		.pipe(plugins.sass(config.sass,{sourcemap: true}).on('error', plugins.sass.logError))
        .pipe(gulp.dest(config.dirs.dest))
        .pipe(plugins.minifyCss({map: true}))
        .pipe(plugins.sourcemaps.write('./'))
        .pipe(gulp.dest(config.dirs.dest));
});