Taro 场景下 NutUI 默认设计尺寸是375，项目里设计稿用的 750 怎么办

[richard1015]

如果直接使用 nutui 组件，会发现样式偏小的情况，这是因为 Taro 默认将 nutui 的样式尺寸从 px 转换为了 rpx，可以通过配置 selectorblacklist 来禁止转换。

配置方法

// config/index.js
const config = {
  // ...
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {
          selectorBlackList: [/nut-/]
        }
      }
    }
  },
}

[lonelyWalkor]

这样处理 会导致nutui 中的样式宽度最终输出为px
还有没有更好的解决办法呢？

[CoderBCat]

对呀 遇到这个问题 很难解呢？

[lonelyWalkor]

3.4.3 已经支持 designWidth 配置为一个函数 可以解决这个问题

[richard1015]

解决方案看这个 #1122

Taro3.4.3版本之前: 解决方案

// config/index.js
const config = {
  // ...
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {
          selectorBlackList: [/nut-/]
        }
      }
    }
  },
}

Taro3.4.3版本：解决方案

  postcss: {
      pxtransform: {
        enable: true,
        config: {
          // selectorBlackList: ['nut-']
          designWidth (input) {
            const isNutUi = input.file.replace(/\\+/g, '/').indexOf('@nutui/nutui-taro') > -1
            return isNutUi ? 375 : 750
          }
        }
      }
 }

Taro3.4.3 具体变更内容可查看
https://github.com/NervJS/taro/tree/next/packages/postcss-pxtransform