PostCSS错误:[object Object]不是PostCSS插件

Question

错误来自postcss插件,我想我可能写错了.

我想补充cssnano和autoprefixer到postcss插件.

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$ 

我的代码:

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

Answer 1

@rizkit - 我找到了解决方法，而且很简单。只要运行npm i -d postcss，问题就解决了。

基本上，您需要依赖项中的gulp-postcss和postcss插件才能正常工作。我假设gulp-postcss插件需要更新postcss项目中的包引用以正确修复它，所以我们只需要gulp-postcss在将来包含。

Answer 2

您正在使用该gulp-autoprefixer包.这只是原始autoprefixer包装的一个包装器,它将它变成了一个gulp插件,所以你可以做到.pipe(autoprefixer()).

但是postcss期望原始包本身,而不是gulp插件.

所以不是这样的:

autoprefixer = require('gulp-autoprefixer'),

您需要安装autoprefixer包并执行此操作:

autoprefixer = require('autoprefixer'),

Answer 3

Tailwindcss 和 React 问题

对于在使用 tailwindcss 设置反应项目时遇到上述问题的任何人，运行npm i postcss -D对我有用。

Answer 4

如果您使用，autoprefixer 10您可能会再次遇到该问题，有一个与此相关的 github 问题，其中包含一些链接和解释：https : //github.com/postcss/autoprefixer/issues/1358

tl;博士：

• 对于postcss-cli和gulp-postcss你不得不等待更新，PostStylus你可能永远不会得到更新。
• 或添加postcss为 devDependency