vite4项目中，vant兼容750适配

置顶 LingRuiBin

已于 2024-05-24 15:55:32 修改

阅读量600

点赞数 11

文章标签： javascript vant

于 2024-01-06 18:10:40 首次发布

本文链接：https://blog.csdn.net/qq_29484537/article/details/135429954

版权

一般非vite项目，使用postcss-px-to-viewport。在设计稿为750时候，可使用以下配置兼容vant。
在这里插入图片描述
在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
      }
    }
  }

}