gulp autoprefixer compiling to .scss not .css

Question

I'm trying to use gulp autoprefixer, but when it compiles code it creates a .scss file in my public folder. My file structure is as follows:

Root > dev > sass > main.scss

&

public > css > main.css

When I make changes in main.scss the general sass code compiles fine, but when using autoprefix it creates a main.scss file in my public/css directory.

My gulpfile.js is as follows:

var gulp = require('gulp');
var sass = require('gulp-sass');

var gulp = require('gulp');
var sass = require('gulp-sass');

var autoprefixer = require('gulp-autoprefixer');


gulp.task('styles', function() {
    gulp.src('./dev/sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./public/css/'));
});

gulp.task('autoprefixer', function () {
    return gulp.src('./dev/sass/**/*.scss')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('./public/css/'));
});

//Watch task
gulp.task('default',function() {
    gulp.watch('./dev/sass/**/*.scss',['styles', 'autoprefixer']);
});

L. Catallo L. Catallo · Accepted Answer · 2015-12-03T23:20:35

You missed the sass compilation in the autoprefixer task.

it should be

gulp.task('autoprefixer', function () {
    return gulp.src('./dev/sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('./public/css/'));
});

Autoprefixer is made to work on plain css and does not compile sass. So you have to do it by yourself before passing the stream through autoprefixer.

gulp autoprefixer compiling to .scss not .css

1 Answers