postcss-px-to-viewport是一款很优秀的插件，将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件。
在vite构建的项目中，开发过程中，有个临时需求：将移动端页面适配到横屏的自助机上。
vite中内置了postcss，引入插件如下：
css: {
postcss: {
plugins: [
require('autoprefixer'),
require('postcss-px-to-viewport')({
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 3,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: ['ignore-'],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [],
landscape: true,
landscapeUnit: 'vw',
landscapeWidth: 750,
}),
],
},
},
然而会报错如下：
image
查阅资料，发现postcss版本的问题，将postcss.atRule 改成 postcss.AtRule即可。
方法如下：打开node_modules，找到 postcss-px-to-viewport 插件打开如图：
image
找到下面：
编组 5.png
改成：
编组 6.png
再保存，重新跑一边即可。
