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

再保存，重新跑一边即可。