How to combine postcss / autoprefixer with LESS
I have a site for which I am using custom LESS stylesheets and they include Bootstrap LESS stylesheets. They are all compiled into the final style.css
source file style.css.map
.
This is what my Gulpfile looks like:
var gulp = require('gulp');
var less = require('gulp-less-sourcemap');
var mySite = '.';
gulp.task('less', function () {
gulp.src(mySite + '/css/**.less')
.pipe(less())
.pipe(gulp.dest(mySite + '/css'));
});
Now I would like to add autoprefixer . This is what I tried, but it doesn't work:
var gulp = require('gulp');
var less = require('gulp-less-sourcemap');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var mySite = '.';
gulp.task('less', function () {
gulp.src(mySite + '/css/**.less')
.pipe(less())
.pipe(postcss([autoprefixer({ browsers: ['last 2 version'] })]))
.pipe(gulp.dest(mySite + '/css'));
});
This is because I am passing the generated source files to postcss
and cannot process it. So I tried this:
var gulp = require('gulp');
var less = require('gulp-less-sourcemap');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var mySite = '.';
gulp.task('less', function () {
gulp.src(mySite + '/css/**.less')
.pipe(less())
.pipe(postcss([autoprefixer({ browsers: ['last 2 version'] })]))
.pipe(gulp.dest(mySite + '/css'));
gulp.src(mySite + '/css/**.css')
.pipe(postcss([autoprefixer({ browsers: ['last 2 version'] })]))
.pipe(gulp.dest(mySite + '/css'));
});
However, no prefixes are added. Maybe it's because Bootstrap CSS is already prefixed and this is somehow a problem for postcss
?
How to do it?
source to share
According to the Gulp-Less Readme ,
If you are using version 1.3.7 or higher, you will be able to use growing installations of LESS plugins, potentially simplifying build steps.
And the code they suggest to use would look like this.
var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]});
gulp.src('./less/**/*.less')
.pipe(less({
plugins: [autoprefix]
}))
.pipe(gulp.dest('./public/css'));
source to share