I can't get gulp to produce a scouce map

Question

I am trying to run a simple Gulp task to output css and create a source map. The conversion to css is working fine, but when I open the developer console the css is still showing as coming from style.css and not the .scss files as I would expect. I have checked the 'Enable CSS Source Maps' in the browser settings. Here is my code:

// compile all sass files to css
gulp.task('sass', function(done){
  return gulp.src('src/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sass({outputStyle: 'expanded'})) // Converts Sass to CSS with gulp-sass
    .pipe(sourcemaps.init()) // create sourcemaps 
    .pipe(sourcemaps.write())  
    .pipe(gulp.dest('app/css'))  // save to the 'app' directory
    done();
});

Any help greatly appreciated.

Answer 1

You have to initiate the sourcemap before compiling your sass:

gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss') 
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(sourcemaps.write())  
    .pipe(gulp.dest('app/css'));
});

Note that with Gulp 4, you no longer need the gulp-sourcemaps package, and can instead do:

gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss', {sourcemaps: true}) 
    .pipe(sass({outputStyle: 'expanded'})) 
    .pipe(gulp.dest('app/css', {sourcemaps: true}));
});