postcss cube-ui 单位问题

在移动端单位有时候我们用vw ，cube-ui 默认会安装postcss-px-to-viewport 默认设置是如下

 'postcss-px-to-viewport':{
      viewportWidth: 375,
      viewportHeight: 667 ,
      unitPrecision: 5,
      viewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false
    },

然而通常设计稿是750的，有时候还要用其他UI,也是750的，这个时候我们只需要安装yarn add postcss-design-convert然后在选项中配置如下

'postcss-px-to-viewport':{
      viewportWidth: 750,
      viewportHeight: 1334 ,
      unitPrecision: 5,
      viewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false
},
'postcss-design-convert':{
      multiple:2,
      units:['vw'],
      selector:/^\.cube-/
 }

这样尺寸就可以直接按750设计尺寸就可以了。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <cube-button @click="showCascadePicker">Cascade Picker</cube-button>
    <div class="div0">sddsklfjsd</div>
  </div>
</template>
<style>
.div0{
  height: 100px;
  line-height: 100px;
  text-align: center;
  width: 375px;
  background: yellowgreen;
}
</style>

效果如下，原来没有设置之前375是满屏，设置了postcss-design-convert之后 375只是屏幕的一半

postcss cube-ui 单位问题