Sources are wrong in Source Map with Gulp

Question

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.

Mark · Accepted Answer · 2018-02-16 16:22:32Z

4

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.

edited Feb 16, 2018 at 16:22

answered Feb 16, 2018 at 16:17

Mark

192k32 gold badges557 silver badges580 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ebenizer Pinedo Over a year ago

What a fool. It was so simple. Thanks Mark, it works ;)

Collectives™ on Stack Overflow

Sources are wrong in Source Map with Gulp

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related