Ошибка PostCSS: [объект Object] не является плагином PostCSS

Ошибка исходит от плагина 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']);

postcss gulp
person Joe Consterdine    schedule 17.10.2016    source источник

Ответы (5)


arrow_upward
31
arrow_downward

Вы используете пакет gulp-autoprefixer. Это просто оболочка исходного пакета autoprefixer, которая превращает его в плагин gulp, так что вы можете .pipe(autoprefixer()).

Однако postcss ожидает сам исходный пакет, а не плагин gulp.

Итак, вместо этого:

autoprefixer = require('gulp-autoprefixer'),

Вам необходимо установить пакет autoprefixer и сделать следующее:

autoprefixer = require('autoprefixer'),
person Sven Schoenung    schedule 17.10.2016
comment
Была такая же проблема с gulp-cssnano - его также нельзя использовать в качестве плагина PostCSS. Пришлось потребовать и использовать cssnano вместо gulp-cssnano. Визуально он выглядит почти так же, и, как новичок в Gulp, я должен сказать, что это просто невозможно не заметить. - person The Vojtisek; 19.11.2016
comment
дополнительное преимущество: теперь вы можете «внезапно» использовать параметры внутри вашего автопрефикса: `.pipe (postcss ([autoprefixer ({браузеры: ['iOS ...']})]))` - person Frank Nocke; 07.04.2017

arrow_upward
25
arrow_downward

@rizkit - я нашел исправление, и это просто. Просто запустите npm i -d postcss и проблема решена.

По сути, для правильной работы вам нужны плагины gulp-postcss и postcss в ваших зависимостях. Я предполагаю, что подключаемому модулю gulp-postcss потребуется обновить ссылку на пакет postcss в проекте, чтобы исправить это должным образом, поэтому нам нужно будет включать только gulp-postcss в будущем.

person Billy    schedule 14.10.2020
comment
npm i -d postcss у меня сработало! Я обновился до Ng12 и столкнулся с этой проблемой. - person Demven Weir; 22.05.2021

arrow_upward
9
arrow_downward

Проблема с Tailwindcss и React

Для всех, кто столкнулся с вышеуказанной проблемой при настройке проекта реакции с помощью tailwindcss, у меня работал npm i postcss -D.

person Damercy    schedule 13.12.2020
comment
хорошо ， это сработало для меня - person JChen___; 23.06.2021

arrow_upward
6
arrow_downward

Если вы используете autoprefixer 10, вы можете снова столкнуться с этой проблемой, это связано с проблемой github с некоторыми ссылками и пояснениями: https://github.com/postcss/autoprefixer/issues/1358

tl;dr:

  • для postcss-cli и gulp-postcss вы должны дождаться обновления, для PostStylus вы можете никогда не получить обновление.
  • или добавьте postcss как devDependency
person RiZKiT    schedule 02.10.2020
comment
Также возможен откат до Autoprefixer v9 с использованием npm i -D autoprefixer@9. - person Daniel Tonon; 17.12.2020

arrow_upward
1
arrow_downward

В моем случае я все еще получал эту ошибку вместе с не могу найти build-manifest.json, когда я обновился до Next js v 10 и обновил tailwind, autoprefixer и postcss.

Мне также пришлось обновить пряжу, чтобы наконец избавиться от ошибок.

Обновленные зависимости dev в моем package.json были такими:

  "devDependencies": {
    "autoprefixer": "^10.2.6",
    "babel-plugin-inline-react-svg": "^1.1.1",
    "postcss": "^8.3.0",
    "tailwindcss": "^2.1.2"
  }
person Arindam Dawn    schedule 30.05.2021