执行grunt build时postcss任务报错：plugin is not a function

这个错误的核心原因是你使用的PostCSS插件（autoprefixer、cssnano、pixrem）新版本API已变更，而旧模板的配置仍沿用老版本调用方式，同时grunt-postcss的版本可能也不兼容新插件。

具体修复步骤： #

1. 调整PostCSS插件的配置写法 #

把原配置里的插件调用从带括号的函数执行改为直接导入插件对象——新版PostCSS插件不再需要执行函数生成实例：

postcss: {
    options: {
        processors: [
            require('pixrem'), // 去掉末尾的()
            require('autoprefixer'), // 去掉末尾的()
            require('cssnano') // 去掉末尾的()
        ]
    },
    dist: {
        src: 'dist/css/main.css'
    }
},

2. 匹配兼容的插件版本 #

如果调整写法后仍报错，说明插件版本过高，和旧版grunt-postcss不兼容。可以在package.json里指定兼容的旧版本：

{
  "devDependencies": {
    "grunt-postcss": "^0.9.0",
    "pixrem": "^3.0.2",
    "autoprefixer": "^9.8.6",
    "cssnano": "^4.1.11"
  }
}

然后执行以下命令重新安装依赖：

rm -rf node_modules package-lock.json
npm install

3. 替代停止维护的pixrem（可选） #

pixrem已停止维护，新版autoprefixer内置了rem转px的降级兼容功能，可直接移除pixrem，简化配置：

postcss: {
    options: {
        processors: [
            require('autoprefixer')({
                overrideBrowserslist: ['last 2 versions', 'ie >= 9'] // 按需配置目标浏览器范围
            }),
            require('cssnano')
        ]
    },
    dist: {
        src: 'dist/css/main.css'
    }
},

完成以上步骤后，重新执行grunt build即可解决插件报错问题。

内容的提问来源于stack exchange，提问作者Blckpstv