designWidth 配置为 375

[liuyunwushui]

designWidth 配置为 375，taro-ui全部放大了，没有适配，有没有什么方法配置一下

[taro-ui-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[FredZeng]

给 taro-ui 配一个 postcss 插件，postcss-px-scale

{
  "mini": {
    "postcss": {
      "postcss-px-scale": {
        "enable": true,
        "config": {
          "scale": 0.5, // 缩放为 1/2
          "units": "rpx",
          "includes": ["taro-ui"]
        }
      },
      "pxtransform": {
        "enable": true,
        "config": {}
      },
      "url": {
        "enable": true,
        "config": {
          "limit": 1024 // 设定转换尺寸上限
        }
      },
      "cssModules": {
        "enable": false, // 默认为 false，如需使用 css modules 功能，则设为 true
        "config": {
          "namingPattern": "module", // 转换模式，取值为 global/module
          "generateScopedName": "[name]__[local]___[hash:base64:5]"
        }
      }
    }
  }
}

[7zf001]

"includes": ["taro-ui"]这里的配置没有处理taro-ui库里面的px。想看看你真实项目是怎么用的？

[ghost]

请问 问题是否已解决？

[ghost]

解决方式：https://www.cnblogs.com/BySee1423/p/14469905.html

[lyboy2012]

mark

[mancoxu]

真垃圾 ，没人维护了吗？

[defolly]

加了 postcss-px-scale 根本不起作用，taro-ui 里的样式还是不对，引用 taro-ui Scss前面添加 $hd: 1 !default， 也只有部分组件有效果，这个问题具体应该如何解决呢？

[asd116725]

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

我亲测有用，前提是需要yarn add postcss-px-scale

[shushu2013]

Taro v3.4.13 开始支持 designWidth 传入函数 taro-ui 的设计稿是 750 的，项目的设计稿如果是 375 ，需要配置一下 designWidth

const config = {
  designWidth(input) {
    // taro-ui 的设计稿是 750
    if (input.file.indexOf('taro-ui/dist') > -1) {
      return 750
    }
    return 375
  },
  deviceRatio: {
    375: 2 / 1,
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
  },
}

[su-dan]

给 taro-ui 配一个 postcss 插件，postcss-px-scale

{
  "mini": {
    "postcss": {
      "postcss-px-scale": {
        "enable": true,
        "config": {
          "scale": 0.5, // 缩放为 1/2
          "units": "rpx",
          "includes": ["taro-ui"]
        }
      },
      "pxtransform": {
        "enable": true,
        "config": {}
      },
      "url": {
        "enable": true,
        "config": {
          "limit": 1024 // 设定转换尺寸上限
        }
      },
      "cssModules": {
        "enable": false, // 默认为 false，如需使用 css modules 功能，则设为 true
        "config": {
          "namingPattern": "module", // 转换模式，取值为 global/module
          "generateScopedName": "[name]__[local]___[hash:base64:5]"
        }
      }
    }
  }
}

这样写也没有用诶

[zh-lx]

在 taro 配置中修改 designWidth 为函数式，亲测有效：

config = {
  designWidth(input) {
    if (input.file.replace(/\\+/g, "/").indexOf("taro-ui/dist") > -1) {
      return 750;
    }
    return 375;
  },
}

但是要注意的一点是，所有引入的 taro-ui 的样式文件需要通过在 .js 文件中 import 'taro-ui/dist/components/xxx.scss' 的方式引入，不能通过 css 文件的 @import 引入

[StarlightUnion]

在 taro 配置中修改 designWidth 为函数式，亲测有效：

config = {
  designWidth(input) {
    if (input.file.replace(/\\+/g, "/").indexOf("taro-ui/dist") > -1) {
      return 750;
    }
    return 375;
  },
}

但是要注意的一点是，所有引入的 taro-ui 的样式文件需要通过在 .js 文件中 import 'taro-ui/dist/components/xxx.scss' 的方式引入，不能通过 css 文件的 @import 引入

亲测可用，但需要兼容input为数字的情况

config = {
  designWidth(input) {
    if (input?.file?.replace(/\\+/g, "/").indexOf("taro-ui/dist") > -1) {
      return 750;
    }
    return 375;
  },
}