Use gulp-sourcemaps package to not include content in the sourcemap a…

…nd fix path in dev tools for sass files

gulpfile.babel.js

@@ -32,6 +32,7 @@ import { dest, parallel, src, series, watch } from 'gulp';
 import autoprefixer from 'gulp-autoprefixer';
 import cleanCSS from 'gulp-clean-css';
 import sass from 'gulp-sass';
+import sourcemaps from 'gulp-sourcemaps';
 import styleLint from 'gulp-stylelint';
 
 // JS related plugins.
@@ -130,16 +131,22 @@ sassLinter.description = 'Lint through all our SASS/SCSS files so our code is co
 export const css = done => {
 	del( './assets/css/*' );
 
-	src( './src/scss/wp-*.scss', { sourcemaps: true } )
+	src( './src/scss/wp-*.scss' )
+		.pipe( sourcemaps.init() )
 		.pipe( plumber( errorHandler ) )
 		.pipe( sass( { outputStyle: 'compressed' } ).on( 'error', sass.logError ) )
 		.pipe( rename( { suffix: '.min' } ) )
-		.pipe( dest( './assets/css', { sourcemaps: '.' } ) );
+		.pipe( sourcemaps.write( '.', {
+			includeContent: false,
+			sourceRoot: '../../src/scss',
+		} ) )
+		.pipe( dest( './assets/css' ) );
 
 	src( [
 		'./src/scss/*.scss',
 		'!src/scss/wp-*.scss',
-	], { sourcemaps: true } )
+	] )
+		.pipe( sourcemaps.init() )
 		.pipe( plumber( errorHandler ) )
 		.pipe( sass( { outputStyle: 'expanded' } ).on( 'error', sass.logError ) )
 		.pipe( dest( './assets/css' ) )
@@ -156,7 +163,11 @@ export const css = done => {
 			},
 		} ) )
 		.pipe( rename( { suffix: '.min' } ) )
-		.pipe( dest( './assets/css', { sourcemaps: '.' } ) )
+		.pipe( sourcemaps.write( '.', {
+			includeContent: false,
+			sourceRoot: '../../src/scss',
+		} ) )
+		.pipe( dest( './assets/css' ) )
 		.pipe( server.stream( {
 			match: '**/*.css', // Sourcemap is in stream so match for actual CSS files
 		} ) );