Less CSS - Add vendor prefixes with less.js in development environment

Question

I'm using LESS with Gulp. I'm also using the Autoprefixer plugin which adds all needed vendor prefixes based on Browserlist. This works pretty nice when creating all minified files for the final export.

My problem is: When I test the CSS in the developement environment using less.js there are no vendor prefixes added. It seems that the auto prefixer is only available for the cli. Is there a way to add vendor prefixes on the fly with less.js or another plug in? I've already tried to run prefixfree after less.js but without luck.

Answer 1

Just pipe a stream from gulp-less to autoprefixer, e.g.

gulp.task('styles', [], function () {
    return gulp.src('less/*.less')
        .pipe(gulplLss())
        .pipe(postcss([autoprefixer()]))
        .pipe(gulp.dest('css/'));
}

gulp.task('watch', function () {
    gulp.watch('less/*.less', 'styles');
}

(This is using autoprefixer via postcss tool which is now recommended way. Before deprecation it the autoprefixer line whould be: .pipe(autoprefixer()))

Answer 2

There is a pure frontend solution (if it is what you are looking for). Autoprefixer can run in browser environment. You don't have to run it as a Less plugin.

In estFiddle I run Autoprefixer after compiling Less into CSS and it works. (You can see source code here.)