taro3 375设计稿与taro-ui使用问题

739 阅读1分钟

最近写taro项目发现一个问题,项目使用的是taro3+taro-ui,设计图的设计稿尺寸为375,而taroui的设计稿又是750,所以需要我们给taroui单独设置。而我在网上查找的方案是使用postcss-px-scale插件,在mini postcss 部分添加,代码如下

"postcss-px-scale": {
  "enable": true,
   "config": {
      "scale": 0.5, // 缩放为 1/2
      "units": "rpx",
      "includes": ["taro-ui"]
  }
}

我在项目中使用后发现这样并不能转换,而网上查找的资料都是清一色的这种方案,最后我在issue中发现了解决方案,设置designWidth,代码如下

designWidth(input) {
if (input?.file?.replace(/\+/g, "/")?.indexOf("taro-ui/dist") > -1) {
  return 750;
}
return 375;
},
deviceRatio: {
  640: 2.34 / 2,
  750: 1,
  828: 1.81 / 2,
  375: 2 
},

注意:taro-ui的样式不能在css中引入,不生效,直接在app中或组件中直接使用即可;
import 'taro-ui/dist/style/index.scss'

PS:个人笔记,不喜勿喷。