Problem with gulp-sass ? Or gulp-autoprefixer ? Or gulp-sourcemaps ?

Hi,

There is a lot of issue about mixing gulp-sass and/or gulp-autoprefixer with gulp-sourcemaps.

For example : https://github.com/dlmanning/gulp-sass/issues/106, https://github.com/sindresorhus/gulp-autoprefixer/issues/8

I just spend 2 hours debugging to find out where the problem come from, and still no success.

But I finally noticed something (but still don’t know where the problem come from).

In source-map-generator.js @ Line 359, I watched the key value.

In this configuration:

gulp.task('css', function () {
    gulp.src('./assets/sass/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        //.pipe(sourcemaps.write({includeContent: false}))
        //.pipe(sourcemaps.init({loadMaps: true}))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./public/css'))
});

The value of the key is $style.css, and it does not work

But in this configuration:

gulp.task('css', function () {
    gulp.src('./assets/sass/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write({includeContent: false}))
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./public/css'))
});

The value of the key is $style.scss, and it works

Because with the two configurations, _sourcemapContents in source-map-generator.js#360 has always a $style.scss key.

Hope this helps to resolve this issue, and to find if the problem come from sourcemap, sass or autoprefixer (or something else)

[HectorLS]

Hi, i was reading that the new version fixed the problem, but i installed today
“gulp”: “^3.9.1”, “gulp-autoprefixer”: “^3.1.0”, “gulp-sass”: “^2.3.1”, “gulp-sourcemaps”: “^1.6.0”,

And doesn’t work if i do:

gulp.task('sass', () => {
  log('Compiling SCSS files...');
  return gulp
    .src('./src/app/**.*scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./.temp/'));
});

But if i added the @ByScripts two MAGIC LINES works

// THIS WORKS
gulp.task('sass', () => {
  log('Compiling SCSS files...');
  return gulp
    .src('./src/app/**.*scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write({includeContent: false}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./.temp/'));
});

When this would be fixed to don’t need that two lines… is like zero readable… :S

[ByScripts]

Don’t know if it’s related. In my sample I don’t import any other scss files, and I don’t get any error.

Here is a sample project: https://github.com/ByScripts/gulp-sample

Just running npm install then gulp should do the work.

Hope this helps.