gulp-sourcemaps Generating Incorrect Source Map

I am using Gulp to run build tasks, with the gulpfile.js shown below (require() statements removed for brevity, but I know I’m importing the correct modules). Everything is running swimmingly; there are no errors or warnings of any kind, and all files show up in the correct output folder. However, when I go to debug in Chrome, significant lines appear grayed out (see screenshot below), and I see very strange behavior when setting breakpoints (e.g., the breakpoint actually gets set on a later line). There is clearly some issue with my use of the gulp-sourcemaps module, but I can’t figure out what. All I can figure is that maybe it is not compatible with one of the other modules, but I don’t know which one.

I hate to be that guy that says “solve my bug for me!” but for the life of me I can’t find a solution to this issue. All previous posts seem to deal with Gulp not generating any source map or other build time errors, and that’s not the case here. Any help will be very much appreciated!

// PATHS
var wwwroot = "./wwwroot/";
var src = wwwroot;
var tmp = wwwroot + "tmp/";
var dest = wwwroot + "dist/";
var maps = "maps/";

var js = "js/";
var srcJS = src + js;
var tmpJS = tmp + js;
var destJS = dest + js;

// JAVASCRIPT TASK
gulp.task("convert:scripts", () => {
    // Convert JS files in separate streams
    // Wait for all of these streams by merging them
    return merge(
        convertJS(["derp1.js", "derp2.js"], "derp"),
        convertJS(["herp.js"]),
    );

    // Stream source JS files into the temp directory and transform them
    // Pipe them to the distribution directory, concatenating (if requested) and renaming them in the process
    // Create source maps if we are in the Development environment
    function convertJS(glob, concatName) {
        return pump([
            gulp.src(glob.map(path => srcJS + path), { base: srcJS }),
            gulp.dest(tmpJS),
            isDev() ? sourcemaps.init() : util.noop(),
            eslint({ fix: false }),   // lint
            eslint.format(),
            eslint.failAfterError(),
            concatName ? concat(concatName) : util.noop(),   // yeah, yeah, we're using a truthy value...
            babel(),    // transpile
            uglify(),   // minify
            rename(path => path.extname = ".min.js"),
            isDev() ? sourcemaps.write(maps) : util.noop(),
            gulp.dest(destJS)
        ]);
    }
});

// HELPERS
function isDev() {
    return (util.env.configuration === "debug" || util.env.configuration === undefined) ? true : false;
}

enter image description here

Chrome DevTools points to wrong sass file in sourcemap

I generate my css and sourcemaps from sass files using gulp-sourcemaps and have noticed that sometimes, when an element has a color defined as a variable, the sourcemap points to the variable’s scss file, not the element’s scss file.

So if, for example, if a element is styled in nav.scss and the color variable is defined in colors.scss:

.navigation-top a {
font-weight: 600;
color: $color__topnav-text;
transition: color 0.2s;
}

The css sourcemap for that element when viewed in Chrome DevTools points to colors.scss, not nav.scss. It only happens with a few elements. DevTools still sees the correct scss file for most elements that use color variables. Is this a weird Chrome thing or a problem with the generated sourcemap?