Gulp source maps not working on remote server

Question

So I'm running a gulp setup (remote server) which creates source maps in the right directory, adds a sourceMappingURL (linking to the correct map) to my css file, and writes the correct sourceRoot in my css.map.

When I check my element styles however, it still keeps pointing towards the compiled css file. (Instead of the source.scss file)

Here's my directory structure:

dev -
|        |
|        scss -
|                 |
|                 main.scss
prod -
        |
        css -
               |
                 main.css
                 main.min.css
                 main.min.css.map

The source mapping url within my main.min.css is: sourceMappingURL=main.min.css.map
The source root in main.min.css.map is: "sourceRoot":"../../dev/scss"


My gulp function looks as follow:

gulp.task('styles', function() {
  return sass('site/lvh2016/dev/scss/main.scss', { sourcemap: true, style: 'compact' })
    .pipe(sourcemaps.init())
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('site/lvh2016/prod/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cssnano())
    .pipe(sourcemaps.write('.', {
        includeContent: false,
        sourceRoot:'../../dev/scss'
    }))
    .pipe(gulp.dest('site/lvh2016/prod/css'));
});

Does anybody have any idea why my page inspector doesn't point me towards the source .scss files? But rather shows the minified .css as source?