前言

如果自己的项目是按照750尺寸做的适配，引入vant组件就会出现，组件的样式都缩小一半的情况；
github的issues里面已经有小伙伴提过类似的问题传送门

修改配置

改法：利用postcss-pxtorem对项目和vant组件进行区别适配，修改postcss.config.js或者.postcssrc.js里面的配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = ({ file }) => {
  let rootValue;
  // vant组件使用37.5
  if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
    rootValue = 37.5;
  } else {
    rootValue = 75;
  }
  return {
    plugins: {
      "postcss-import": {},
      "postcss-pxtorem": {
        rootValue: rootValue,
        propList: ["*"]
      },
      "autoprefixer": {}
    }
  };
};