Is it possible to have fully working sourcemaps to debug minified CSS generated from SASS using Gulp?

Question

Using Gulp, I am able to produce CSS transpiled from SASS with sourcemaps that point to the original SASS files, and I am also able to produce sourcemaps to debug minified CSS, but so far I have been unable to work out how (if it is even possible) to produce sourcemaps using Gulp that allow you to debug CSS that is both transpiled from SASS and minified, along with adding vendor prefixes etc. I have managed to produce some sourcemap outputs but they end up mapping back to the wrong line in the .scss files when I perform both transpilation and minification.

This code below does produce sourcemaps as an output which the browser picks up and reads, but as I said before, Chrome debug tools point to the wrong files/lines in the original .scss files.

Here is my css-compile Gulp task.

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