Gulp Autoprefixer Not Working
I know this question was asked a while back but I have stumbled upon a similar problem.
Here is how I resolved it:
- Add
browserlist
entry topackage.json
:
{
"browserslist": [
'last 2 versions',
'safari 5',
'ie6',
'ie7',
'ie 8',
'ie 9',
'opera 12.1',
'ios 6',
'android 4'
]
}
- Install
autoprefixer
npm i --save-dev autoprefixer
- Install
postcss
npm i --save-dev postcss
- Modify the pipe in
gulpfile.js
to be:
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass({errLogToConsole: true}))
.pipe(postcss([autoprefixer()]))
.pipe(minifycss())
.pipe(gulp.dest(''))
.pipe(plumber({
errorHandler: onError
}))
.pipe(livereload(server));
});
This gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var plumber = require('gulp-plumber');
function onError(err) {
console.log(err);
}
gulp.task('sass', function(){
return gulp.src('src/style.scss')
.pipe(sass())
.pipe(prefix('last 2 versions'))
.pipe(minify())
.pipe(gulp.dest('css/'))
.pipe(plumber({
errorHandler: onError
}))
});
With this scss:
body {
opacity: .5;
box-sizing: border-box;
transform: scale(.5);
display: flex;
}
Produces this output:
body{opacity:.5;box-sizing:border-box;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
So, I'm not sure what I'm doing different exactly except that I list my browsers differently. But I assume you've tried removing those etc.
This should work, putting the browsers in an array, instead of as arguments:
.pipe(autoprefixer({
overrideBrowserlist: ['last 2 version', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
})
and you can add cascade by setting it true or false
cascade: false