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

本文主要是介绍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"},

在这里插入图片描述

第三步：删除项目中的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}}
};