sindresorhus / gulp-autoprefixer

Prefix CSS
MIT License
692 stars 50 forks source link

Problem with gulp-sourcemaps and gulp-autoprefixer #108

Open evgeniy-vashchuk opened 5 years ago

evgeniy-vashchuk commented 5 years ago

I have a problem with generated sourcemaps, if I have gulp-autoprefixer in in the stream of my styles task. Source maps file is generated, but in browser they show absolutely wrong files. But if I remove gulp-autoprefixer from stream, sourcemaps are shown correctly. I know about Plugins with gulp sourcemaps support

3cc78d8df7

I try to insert autoprefixer by gulp-postcss, but in this way I have the same situation (wrong files in browser)

What I must to do, to be able to compile SASS with correct sourcemaps and with autoprefixer?

Code with gulp-autoprefixer:

// WORKING WITH SASS FILES
gulp.task('sass', function() {
    return gulp.src('dev/scss/all.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
        //outputStyle: 'compressed', // minify css (optional)
        indentType: 'tab',
        indentWidth: 1
    }).on("error", notify.onError({
        title: "Error compiling SASS"
    })))
    .pipe(autoprefixer(['last 3 versions']))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dev/css'))
    .pipe(browserSync.reload({stream: true}))
});

Code with postcss and autoprefixer:

// WORKING WITH SASS FILES
gulp.task('sass', function() {
    return gulp.src('dev/scss/all.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
        //outputStyle: 'compressed', // minify css (optional)
        indentType: 'tab',
        indentWidth: 1
    }).on("error", notify.onError({
        title: "Error compiling SASS"
    })))
    .pipe(postcss([ autoprefixer(['last 3 versions']) ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dev/css'))
    .pipe(browserSync.reload({stream: true}))
});