vite4项目中,vant兼容750适配

一般非vite项目,使用postcss-px-to-viewport。在设计稿为750时候,可使用以下配置兼容vant。
vite4项目中,vant兼容750适配_第1张图片
在vite4项目中,以上配置不行。需要调整下,使用postcss-px-to-viewport-8-plugin,并修改viewportWidth,具体如下:

module.exports = (file) => {
  // console.log(" exports--------  ",file)
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport-8-plugin": {
        viewportWidth:function (file) {
        //注意,"node_modules/vant"是windows下的路径。 
        //你可以打印下 file查看自己电脑上的vant路径是什么格式
          return file && file.includes("node_modules/vant") ? 375 : 750;
        },
        unitToConvert: "px",
        // viewportWidth: 750,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        landscape: false
      }
    }
  }

}

你可能感兴趣的:(javascript,vant)