1

I`m trying to create a valid Source Map with Gulp and gulp-sourcemaps. The Source Map is actually created, but inside, the "sources" parameter is not loading the appropriate paths of my SASS files. This is what I get:

"version":3,"file":"style.css","sources":["style.css"]

When I need to load something like this (created by Koala App):

"version":3,"file":"style.css","sources": ["../sass/style.scss","../sass/typography/_fonts.scss","../sass/helpers/_variables.scss"........

This is my Gulp Task

 gulp.task('sass', function () {
  return gulp.src('style/sass/**/*.scss')
  .pipe(sass(
    {
      'outputStyle': 'expanded'
    }
  ))
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(sourcemaps.write('.')
  .pipe(gulp.dest('./style/css'))
  .pipe(bs.reload({stream: true}));
});

Thanks for the time.

Ebenizer Pinedo
  • 1,261
  • 1
  • 10
  • 13

1 Answers1

3

The sourcemaps.init() must go before the sass pipe, so:

gulp.task('sass', function () {
  return gulp.src('style/sass/**/*.scss')
   .pipe(sourcemaps.init())
   .pipe(sass( {
      'outputStyle': 'expanded'
     }).on('error', sass.logError))
   .pipe(sourcemaps.write())
   .pipe(gulp.dest('./style/css'))
   .pipe(bs.reload({stream: true}));
});

See gulp-sass with sourcemaps.

You have two sass calls for some reason, get rid of the first and put its options into the second sass pipe call.

Mark
  • 143,421
  • 24
  • 428
  • 436