Question

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

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

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，这是现在推荐使用的方法。在弃用之前，autoprefixer行应该是：.pipe(autoprefixer())）

Answer 2

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

在estFiddle中，在编译Less to CSS后运行Autoprefixer，它可以运行。（您可以看到源代码here。）

更少的CSS - 在开发环境中添加带有less.js的供应商前缀

2 个答案: