PostCSS error: [object Object] is not a PostCSS plugin
PostCSS error: [object Object] is not a PostCSS plugin
错误来自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']);
您正在使用 gulp-autoprefixer package. That's simply a wrapper around the original autoprefixer 包将其变成 gulp 插件，因此您可以 .pipe(autoprefixer()).
但是 postcss 需要原始包本身，而不是 gulp 插件。
所以不是这个：
autoprefixer = require('gulp-autoprefixer'),
您需要安装 autoprefixer 软件包并执行此操作：
autoprefixer = require('autoprefixer'),
如果您使用 autoprefixer 10，您可能会再次遇到这个问题，有一个 github 问题与此相关，有一些链接和解释：https://github.com/postcss/autoprefixer/issues/1358
tl;博士：
- 对于
postcss-cli 和 gulp-postcss 你必须等待更新，对于 PostStylus 你可能永远不会得到更新。
- 或添加
postcss 作为 devDependency
@rizkit - 我找到了 fix，它很简单。只需 运行 npm i -d postcss 问题就解决了。
基本上，您的依赖项中需要 gulp-postcss 和 postcss 插件才能正常工作。我假设 gulp-postcss 插件需要更新项目中的 postcss 包引用以正确修复它，所以我们只需要在将来包含 gulp-postcss。
Tailwindcss 和 React 问题
对于在使用 tailwindcss 设置反应项目时遇到上述问题的任何人，运行 npm i postcss -D 对我有用。
在我的情况下，我仍然收到此错误以及 cannot find build-manifest.json
当我升级到 Next js v 10 并升级了 tailwind、autoprefixer 和 postcss 时。
我还必须升级 yarn 才能最终消除这些错误。
我的 package.json 中更新的开发依赖项如下：
"devDependencies": {
"autoprefixer": "^10.2.6",
"babel-plugin-inline-react-svg": "^1.1.1",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.2"
}
在您的 package.json
中添加以下最低 devDependencies
"@babel/core": "^7.8.7",
"@babel/preset-env": "^7.8.7",
"babel-preset-env": "^1.7.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"gulp": "4",
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^8.0.0",
"gulp-clean": "^0.4.0",
"gulp-eslint": "^6.0.0",
"gulp-imagemin": "^7.1.0",
"gulp-mode": "^1.0.2",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-stylelint": "^13.0.0",
"gulp-uglify": "^3.0.2",
"prettier": "^2.0.5",
"stylelint": "^13.3.3",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.17.2"
错误来自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']);
您正在使用 gulp-autoprefixer package. That's simply a wrapper around the original autoprefixer 包将其变成 gulp 插件，因此您可以 .pipe(autoprefixer()).
但是 postcss 需要原始包本身，而不是 gulp 插件。
所以不是这个：
autoprefixer = require('gulp-autoprefixer'),
您需要安装 autoprefixer 软件包并执行此操作：
autoprefixer = require('autoprefixer'),
如果您使用 autoprefixer 10，您可能会再次遇到这个问题，有一个 github 问题与此相关，有一些链接和解释：https://github.com/postcss/autoprefixer/issues/1358
tl;博士：
- 对于
postcss-cli和gulp-postcss你必须等待更新，对于PostStylus你可能永远不会得到更新。 - 或添加
postcss作为 devDependency
@rizkit - 我找到了 fix，它很简单。只需 运行 npm i -d postcss 问题就解决了。
基本上，您的依赖项中需要 gulp-postcss 和 postcss 插件才能正常工作。我假设 gulp-postcss 插件需要更新项目中的 postcss 包引用以正确修复它，所以我们只需要在将来包含 gulp-postcss。
Tailwindcss 和 React 问题
对于在使用 tailwindcss 设置反应项目时遇到上述问题的任何人，运行 npm i postcss -D 对我有用。
在我的情况下，我仍然收到此错误以及 cannot find build-manifest.json 当我升级到 Next js v 10 并升级了 tailwind、autoprefixer 和 postcss 时。
我还必须升级 yarn 才能最终消除这些错误。
我的 package.json 中更新的开发依赖项如下：
"devDependencies": {
"autoprefixer": "^10.2.6",
"babel-plugin-inline-react-svg": "^1.1.1",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.2"
}
在您的 package.json
中添加以下最低 devDependencies "@babel/core": "^7.8.7",
"@babel/preset-env": "^7.8.7",
"babel-preset-env": "^1.7.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"gulp": "4",
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^8.0.0",
"gulp-clean": "^0.4.0",
"gulp-eslint": "^6.0.0",
"gulp-imagemin": "^7.1.0",
"gulp-mode": "^1.0.2",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-stylelint": "^13.0.0",
"gulp-uglify": "^3.0.2",
"prettier": "^2.0.5",
"stylelint": "^13.3.3",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.17.2"