less - 如何结合 postcss/autoprefixer 和 LESS

Question

我有一个使用自定义 LESS 样式表的网站，它们包括 Bootstrap LESS 样式表。它全部编译为带有 style.css.map sourcemap 的最终 style.css 文件。

这是我的 Gulpfile 的样子:

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

现在我想添加 autoprefixer .这是我尝试过的方法，但它不起作用:

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

这是因为我将生成的源映射通过管道传输到 postcss 中，但它无法处理它。所以我试过这个:

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

但是，仍然没有添加前缀。可能是因为 Bootstrap 的 CSS 已经有前缀，这对 postcss 来说是个问题？

如何让它发挥作用？

Answer 1

根据Gulp-Less Readme ,

If you are using version 1.3.7 or higher you will have the ability to use a growing set LESS plugins, potentially simplifying your build steps.

他们建议使用的代码如下所示。

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