为什么vant-ui在项目里样式会整体缩小？

1.问题描述

项目背景：

• 技术栈：vue + vite + vant-ui
• web移动端项目

问题： 由于 vant-ui组件库的设计尺寸都是基于375这个尺寸设计的，而我们平时项目中的设计图基本都是基于750的尺寸设计，在使用的时候，尽管在项目中已经集成了postcss-px-to-viewport、postcss-pxtorem等自适应插件，但是在配置时一般会过滤掉node_modules中的文件，所以就会出现兼容问题，vant的组件就会比正常小，如下图所示londing状态(Toast组件)：

这看起来相当的不协调，所以需要使用postcss插件不同的配置去处理vant-ui组件库中的css文件；

2.解决

2.1方案

在vite中集成postcss-px-to-viewport插件时，需要对viewportWidth使用两种配置，对vant-ui组件库配置为375，对项目中的代码使用750；

2.2 具体操作

因为vite工具中已经继承了postcss插件，所以不需要额外的创建如postcss.config.js的配置文件，可直接在vite.config.js中进行配置；

/*
* vite.config.js
*/
  import postcssPxToViewport from "postcss-px-to-viewport";

// postcss-px-to-viewport 插件配置
const pxToViewportConfig = {
  unitToConvert: "px", // 需要转换的单位，默认为"px"
  unitPrecision: 3, // 单位转换后保留的精度
  propList: ["*"], // 能转化为 vw 的属性列表
  viewportUnit: "vw", // 希望使用的视窗单位
  fontViewportUnit: "vw", // 字体使用的视窗单位
  selectorBlackList: [], // 需要忽略的 CSS 选择器，不会转为视窗单位，使用原有的 px 等单位
  minPixelValue: 1, // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
  mediaQuery: false, // 媒体查询里的单位是否需要转换单位
  replace: true, // 是否直接更换属性值，而不添加备用属性
  landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件
  landscapeUnit: "vw", // 横屏时使用的单位
}

export default {
  css: {
    postcss: {
      plugins: [
        // 对vant组件库中的样式文件处理
        postcssPxToViewport({
          viewportWidth: 375, // 设计稿的视窗宽度
          exclude: [/^(?!.*node_modules\/vant)/], // 对vant组件库单独处理
          ...pxToViewportConfig
       }),
       // 对项目中的样式文件处理
       postcssPxToViewport({
         viewportWidth: 750, // 设计稿的视窗宽度
         include: /\/src\//, // 对src目录下文件进行转换
         ...pxToViewportConfig
       }),
     ],
   },
  },
}