Gulp Sourcemaps

Question

Trying to implement sass sourcemaps but for some reason it doesn't seem to be playing nice for sub folders. For example, below is the main.scss file that gets compiled:

@import 'test';
@import 'test1';
@import 'test2';
@import 'test3';
@import 'sub/test4';

The changes show up (using BrowserSync) and compile with no issues. However inspecting the code in dev tools. It does not seem to reference the last import, it references 'test3' instead. See screenshot Dev Tools Screen Shot

The sass file 'sub/test4' contains the salmon color for the body but the source map is saying that this is contained in the file 'test3'.

See below for the styles task that I am using:

gulp.task('styles', function(){

    return gulp.src('assets/scss/**/*.scss')
        .pipe(plumber({
            errorHandler: function(err){
                this.emit('end');
            } 
        }))
        .pipe(scssLint({ customReport: scssLintStylish }))
        .pipe(sourcemaps.init())
        .pipe(sass({outputStyle: 'compressed', errLogToConsole: true}))
        .on('error', notify.onError({ message: 'SASS Compile Fail'}))
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('assets/css'))
        .pipe(uglifycss())
        .pipe(browserSync.stream({match: '**/*.css'}));
});

Tried various different things but nothing seems to work at all. Any help greatly appreciated!