postcss-px-to-viewport配置横屏参数landscape: true报错postcss.atRule is not a constructor

首先postcss-px-to-viewport是一款很优秀的插件，他能将px转换成视口单位vw，而vw本质上还是一种百分比单位。所以项目中常使用此插件来解决适配问题

前几天，由于项目中有横屏适配的需求，经过查阅插件api后，发现landscape这个参数就是用来处理横屏适配问题的。但是当我配置上后，项目开始启动报错。
报错截图如下：

报错截图

报出了这个问题：

postcss.atRule is not a constructor

后面是试图在网上找找有没有相关的解决方案，可惜并没有找到。

也尝试过换插件版本，将postcss-px-to-viewport 版本换成1.0.0，项目虽然能成功启动，但是设置landscape: true后，横屏竖屏转化后的值依然一样，没有转化。

后面请教了一位前端大佬，在大佬的帮助下，成功解决了此问题，特地记录于此，希望能帮助其他遇到此问题的伙伴们：

第一步：先在package.json中配置好插件版本（版本不能错）

postcss@7.0.32
postcss-px-to-viewport@1.1.1

第二步：在package.json中配置 resolutions参数节点。

"resolutions":{
    "postcss": "7.0.32"
  },

package.json

第三步：删除项目中的node_modules，重新yarn一下拉取依赖文件。

第四步：在.postcssrc.js中配置横屏参数。

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 375,
      viewportHeight: 667,
      unitPrecision: 3,
      viewportUnit: "vw",
      selectorBlackList: [".ignore", ".hairlines"],
      minPixelValue: 3,
      mediaQuery: false,
      landscape: true, // 是否处理横屏情况
      landscapeUnit:'vw', // (String) 横屏时使用的单位
      landscapeWidth: 667 // (Number) 横屏时使用的视口宽度
    },
    cssnano: {
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
};

主要是landscape、landscapeUnit和landscapeWidth三个参数。

最后一步：启动项目，横屏查看单位成功转化。