postcss-px-to-viewport是一款很優(yōu)秀的插件，將px單位轉(zhuǎn)換為視口單位的 (vw, vh, vmin, vmax) 的 PostCSS 插件。

在vite構(gòu)建的項(xiàng)目中，開發(fā)過程中，有個(gè)臨時(shí)需求：將移動(dòng)端頁(yè)面適配到橫屏的自助機(jī)上。

vite中內(nèi)置了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,
        }),
      ],
    },
  },

然而會(huì)報(bào)錯(cuò)如下：

image

查閱資料，發(fā)現(xiàn)postcss版本的問題，將postcss.atRule 改成 postcss.AtRule即可。

方法如下：打開node_modules，找到 postcss-px-to-viewport 插件打開如圖：

image

找到下面：

編組 5.png

改成：

編組 6.png

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