Less CSS-在开发环境中使用Less.js添加供应商前缀

Question

我在Gulp中使用LESS。我还使用了Autoprefixer插件，它基于Browserlist添加了所有需要的供应商前缀。当为最终导出创建所有缩小的文件时，这非常有效。

我的问题是：当我在开发环境中使用less.js测试CSS时，没有添加供应商前缀。自动前缀似乎只适用于cli有没有办法用less.js或其他插件动态添加供应商前缀我已经尝试过在less.js之后运行prefixfree，但没有成功。

Answer 1

只需通过管道将流从gulp-less传输到autoprefixer，例如

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');
}

（这是通过postcss工具使用autoprefixer，这是现在推荐的方式。在弃用之前，autoprefixerline可能是：.pipe(autoprefixer())）

Answer 2

有一个纯粹的前端解决方案（如果它是您想要的）。Autoprefixer可以在浏览器环境中运行。你不必把它作为一个Less插件来运行。

在estFiddle中，我在将Less编译成CSS后运行Autoprefixer，它就可以工作了。（您可以在此处查看源代码。）