Vant与ElementUI混用的一些总结

项目简介

前端页面主要使用vant+postcss-pxtorem+lib-flexible,后端管理页面主要是使用elementUI进行开发。

出现问题

postcss-pxtorem转化把px转化rem或者vm的时候会影响elementui的相关样式，所以在后端管理页面的编码中会出现直接从elementui粘贴过来的版式问题，下面是我的postcss.conifg.js文件的相关配置

module.exports = {
    
    
  plugins: {
    
    
    // ...
    'postcss-px-to-viewport': {
    
    
      unitToConvert: 'px',
      viewportWidth: 320,
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: ['el'],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 568
    }
  }
}

排除其他的配置情况请注意 selectorBlackList 该字段可以排除某些样式不转化为vm，我在这里加上 el 就是把elementui相关的组件都不转化为vm，因此在开发后端页面的时候就可以看到直接从elementui粘贴复制过来的东西可以直接调整使用了。