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

我正在使用LESS和Gulp。我还使用Autoprefixer plugin，它根据Browserlist添加了所有需要的供应商前缀。当为最终导出创建所有缩小文件时，这种方法非常好。Less CSS - 在开发环境中使用less.js添加供应商前缀

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

来源

2015-06-22 lampshade

我建议编译LESS与Gulp进行开发（观看.less文件的更改，自动重新编译+ autoprefix，实时重新加载页面）。通过这种方式，您可以在没有less.js开销的情况下运行开发工具，并使用相同版本的LESS进行编译，从而进行生产。 – pawel

@pawel我想我会用这个解决方案。即使在开发中，从less.js中移除开销也许是件好事。你可以把它作为答案吗？ – lampshade

只需将一个流从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())）

来源

2015-06-22 09:31:23

我实际上是这样使用的：'var plugins = [autoprefix，cleancss];'然后'gulp.pipe（less（{plugins：plugins}））''。这是错误的或不赞成我这样做，因为它目前正常工作。 :) – lampshade

哦，我其实不知道那一个。我仍然希望使用一个gulp插件来完成一项工作，它可以更好地控制发生的事情。因为它看起来:) –

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

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

来源

2015-07-10 17:05:01 Justineo

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

回答

相关问题