Errore PostCSS: [oggetto oggetto] non è un plugin PostCSS - gulp, postcss

L'errore viene dal postcss plugin, penso di averlo scritto in modo errato.

Sto cercando di aggiungere cssnano e autoprefixer al postcss collegare.

gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143
throw new Error(i + " is not a PostCSS plugin");
^

Error: [object Object] is not a PostCSS plugin
at Processor.normalize (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143:15)
at new Processor (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:51:25)
at postcss (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/postcss.js:73:10)
at Transform.stream._transform (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/index.js:47:5)
at Transform._read (_stream_transform.js:167:10)
at Transform._write (_stream_transform.js:155:12)
at doWrite (_stream_writable.js:300:12)
at writeOrBuffer (_stream_writable.js:286:5)
at Transform.Writable.write (_stream_writable.js:214:11)
at DestroyableTransform.ondata (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20)
Mac-a45e60e72dad:gulp JoeKonst$

Il mio codice:

// Dependancies
var gulp = require("gulp"),
browserSync = require("browser-sync"),
plumber = require("gulp-plumber"),
autoprefixer = require("gulp-autoprefixer"),
uglify = require("gulp-uglify"),
compass = require("gulp-compass"),
rename = require("gulp-rename"),
nano = require("cssnano"),
del = require("del"),
postcss = require("gulp-postcss"),
sass = require("gulp-sass");

// Styles
gulp.task("styles", function(){
gulp.src("sass/main.scss")
.pipe(sass())
.pipe(postcss([autoprefixer({browsers: ["last 2 versions"]}), nano()]))
.pipe(gulp.dest("css/"));

gulp.watch("sass/**/*.scss", ["styles"]);
});

// Tasks
gulp.task("default", ["styles"]);

risposte:

Stai usando il gulp-autoprefixer pacchetto. Quello è semplicemente un involucro attorno all'originale autoprefixer pacchetto che lo trasforma in un plug-in gulp, quindi puoi farlo .pipe(autoprefixer()).

però postcss si aspetta il pacchetto originale stesso, non il plugin gulp.

Quindi, invece di questo:

autoprefixer = require("gulp-autoprefixer"),

Devi installare il autoprefixer pacchetto e fare questo:

autoprefixer = require("autoprefixer"),