Trying to run postcss with Grunt and receive the error "Warning: [object Object] is not a PostCSS plugin"

Question

As the title says, I am attempting to run postcss with grunt, but for some reason, when I run Grunt and try and save one of my .scss files, I am receiving the following error:

"Warning: [object Object] is not a PostCSS plugin"

In package.json my devDependencies are:

• "autoprefixer": "^10.1.0",

• "grunt": "^0.4.5",

• "grunt-contrib-cssmin": "^3.0.0",

• "grunt-contrib-sass": "^2.0.0",

• "grunt-contrib-uglify": "^5.0.0",

• "grunt-contrib-watch": "^1.1.0",

• "grunt-postcss": "^0.9.0",

• "postcss": "^8.2.1",

• "postcss-cli": "^8.3.1"

I have tried to go a little Googling, and the only answer I could find was to try running:

"npm i postcss -D"

I gave this a go, but have not had any luck, I am receiving the same error still.

If anyone could offer any assistance here, it would be greatly appreciated.

If there is any other info I need to provide, then please do let me know, and I apologise if I have missed anything, I am a little new to posting on stack overflow.

Thanks in advance for any help that might be offered.

Answer 1

With the upgrade to PostCSS 8+

The package has been archived: https://www.npmjs.com/package/grunt-postcss and is now maintained here: https://www.npmjs.com/package/@lodder/grunt-postcss.

So remove your old grunt-post css installation, and replace with:

npm i --save-dev postcss @lodder/grunt-postcss

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('@lodder/grunt-postcss');