最近写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:个人笔记,不喜勿喷。