警告：[object Object] 不是 PostCSS 插件。带自动前缀的 GruntJS

Question

我正在尝试将 PostCSS 插件 autoprefixer 与 grunt 一起使用。我已经阅读了许多相关的文章和 Stackoverflow 答案，但我仍然收到“警告：[object Object] 不是 PostCSS 插件，请使用 --force 继续”。

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'css/style.css' : 'scss/style.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        },
        postcss: {
            options: {
                map: true,
                processors: [
                    require('autoprefixer')()
                ]
            },
            dist: {
                src: 'css/*.css'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.registerTask('dev',['sass','watch']);
    grunt.registerTask('build',['sass', 'postcss']);
}

package.json
  "devDependencies": {
    "grunt": "^1.4.0",
    "grunt-contrib-sass": "^2.0.0",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-postcss": "^0.9.0",
    "postcss": "^8.3.0",
    "autoprefixer": "^10.2.6"
  }


I am a newbie so please help.

Answer 1

尚不确定根本原因是什么，但将 autoprefixer 降级到版本 9 可以解决问题

package.json
  "devDependencies": {
    "grunt": "^1.4.0",
    "grunt-contrib-sass": "^2.0.0",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-postcss": "^0.9.0",
    "postcss": "^8.3.0",
    "autoprefixer": "^9.8.6"
  }

Answer 2

看来npm包

grunt-postcss

不支持PostCSS 8插件，应该使用

@lodder/grunt-postcss >= 3.0

来代替。

我有同样的问题：

• autoprefixer

  > v9

• cssnano

  > v4

我发现了这个 GitHub 帖子： https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

PostCSS 8 不会为最终用户带来重大的 API 更改。我们 放弃了对旧 Node.js 版本的支持，但 API 没有改变。

PostCSS 8 支持 PostCSS 7 的插件。您只需更新 postcss 依赖项和工具，运行 postcss（如 postcss-loader 或 postcss-cli)。但一些 PostCSS 运行者没有发布新版本 使用 PostCSS 8。

[...]

咕噜声

✅ 支持 PostCSS 8

Move to @lodder/grunt-postcss >= 3.0.
Add postcss dependency to your project.

删除

grunt-postcss

并替换为

@lodder/grunt-postcss

后，所有功能都适用于最新的插件版本。

不要忘记更新 Gruntfile.js：

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