错误来自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']);
@rizkit -我找到了修复,它很简单。运行npm i -d postcss
,问题就解决了。
基本上,你需要gulp-postcss
和postcss
插件在你的依赖,这是正确的工作。我假设gulp-postcss
插件需要在项目中更新postcss
包引用来正确修复它,所以我们只需要在将来包括gulp-postcss
。
您正在使用gulp-autoprefixer
包。这只是原始autoprefixer
包的一个包装,将其变成一个gulp插件,所以你可以做.pipe(autoprefixer())
。
但是postcss
需要原始包本身,而不是gulp插件。
所以不用这个:
autoprefixer = require('gulp-autoprefixer'),
您需要安装autoprefixer
包并执行以下操作:
autoprefixer = require('autoprefixer'),
顺风车&反应的问题
对于任何在使用tailwindcss设置react项目时面临上述问题的人,运行npm i postcss -D
对我来说都很有效。
如果您使用autoprefixer 10
,您可能会再次遇到这个问题,有一个github问题与一些链接和解释相关:https://github.com/postcss/autoprefixer/issues/1358
tl;博士:
- 对于
postcss-cli
和gulp-postcss
,你必须等待更新,对于PostStylus
,你可能永远不会得到更新。 - 或添加
postcss
作为devDependency
在我的情况下,我仍然得到这个错误随着无法找到build-manifest.json当我升级到Next js v 10并升级了tailwind, autoprefixer和postcss。
我不得不升级yarn,以最终摆脱错误。
我的包中更新的开发依赖项。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"