Gulp PostCSS错误:[对象Object]不是PostCSS插件

zbq4xfa0  于 2022-12-08  发布在  Gulp
关注(0)|答案(6)|浏览(313)

错误来自postcss插件,我想我可能写错了。
我正在尝试将cssnanoautoprefixer添加到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']);
zaqlnxep

zaqlnxep1#

在我的例子中,当我升级到Next js v 10并升级了tailwind、autoprefixer和postcss时,我仍然会得到这个错误沿着 * 找不到build-manifest.json*。
我不得不升级纱以及最终摆脱错误。
我的package.json中更新的dev依赖项如下:

"devDependencies": {
    "autoprefixer": "^10.2.6",
    "babel-plugin-inline-react-svg": "^1.1.1",
    "postcss": "^8.3.0",
    "tailwindcss": "^2.1.2"
  }
xghobddn

xghobddn2#

在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"
ymzxtsji

ymzxtsji3#

@rizkit -我找到了修复程序,它很简单。只要运行npm i -d postcss,问题就解决了。
基本上,你需要在依赖项中同时包含gulp-postcsspostcss插件,这样才能正常工作。我假设gulp-postcss插件需要更新项目中的postcss包引用来正确修复它,所以我们将来只需要包含gulp-postcss

sgtfey8w

sgtfey8w4#

您使用的是gulp-autoprefixer包,它只是原始autoprefixer包的一个 Package 器,将其转换为一个gulp插件,因此您可以执行.pipe(autoprefixer())
但是postcss需要原始包本身,而不是gulp插件。
因此,与其这样:

autoprefixer = require('gulp-autoprefixer'),

您需要安装autoprefixer软件包并执行以下操作:

autoprefixer = require('autoprefixer'),
qq24tv8q

qq24tv8q5#

尾风和React问题

对于任何在使用tailwindcss建立react项目时遇到上述问题的人来说,运行npm i postcss -D对我来说都很有效。

9gm1akwq

9gm1akwq6#

如果你使用autoprefixer 10,你可能会再次遇到这个问题,这里有一个与此相关的github问题,并提供了一些链接和解释:https://github.com/postcss/autoprefixer/issues/1358
TL;DR:

  • 对于postcss-cligulp-postcss,您必须等待更新,对于PostStylus,您可能永远不会获得更新。
  • 或者添加postcss作为devDependency

相关问题