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

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

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

你可能感兴趣的:(Vite: postcss-px-to-viewport配置横屏参数landscape: true报错postcss.atRule is not a constructor)