[object Object] is not a PostCSS plugin

gulp-postcss、autoprefixer、cssnano一起使用报错:

Message:
    [object Object] is not a PostCSS plugin
Details:
    fileName: D:\BayConnect\Coding\KaiFeng\website\dev\qilu\sass\bootstrap.css
    domainEmitter: [object Object]
    domainThrown: false

Stack:
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (D:\BayConnect\Coding\KaiFeng\website\node_modules\[email protected]@postcss\lib\processor.js:56:15)
    at new Processor (D:\BayConnect\Coding\KaiFeng\website\node_modules\[email protected]@postcss\lib\processor.js:11:25)
    at postcss (D:\BayConnect\Coding\KaiFeng\website\node_modules\[email protected]@postcss\lib\postcss.js:26:10)
    at D:\BayConnect\Coding\KaiFeng\website\node_modules\[email protected]@gulp-postcss\index.js:50:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
[10:58:17] 'default' errored after 764 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1

PostCSS
推荐配置方法其实有点问题:

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var plugins = [
        autoprefixer({browsers: ['last 1 version']}),
        cssnano()
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest'));
});

改为:

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var cssnano = require('cssnano');

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

发表回复