Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

样式文件中跨平台支持(#ifdef)和尺寸转换不能同时起作用(alipay) #10752

Closed
bluekurk opened this issue Nov 26, 2021 · 0 comments · Fixed by #10762
Closed

样式文件中跨平台支持(#ifdef)和尺寸转换不能同时起作用(alipay) #10752

bluekurk opened this issue Nov 26, 2021 · 0 comments · Fixed by #10762
Labels
F-react Framework - React T-alipay Target - 编译到支付宝小程序 V-3 Version - 3.x
Milestone

Comments

@bluekurk
Copy link

相关平台

支付宝小程序

小程序基础库: 2.10.4
使用框架: React

复现步骤

步骤类似这个issue: #7410

  1. 样式代码里加入平台相关代码 eg:

    /* #ifdef alipay /
    height: 100vh;
    /
    #endif */

  2. 为了支持第1步, 配置文件里添加相应的平台定义:

mini: {
postcss: {
pxtransform: {
enable: true,
config: {platform: process.env.TARO_ENV}
}
}
}

  1. #ifdef 起作用后, 样式文件里如果有小写的 px 的话, 会被转换为 NaN

期望结果

条件编译和尺寸转换同时正常工作

实际结果

条件编译和尺寸转换冲突

环境信息

Taro CLI 3.3.14 environment info:
    System:
      OS: macOS 11.5
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
      npm: 7.19.0 - ~/.nvm/versions/node/v12.18.3/bin/npm
    npmPackages:
      @tarojs/cli: ^3.3.14 => 3.3.14
      @tarojs/components: ^3.3.14 => 3.3.14
      @tarojs/mini-runner: ^3.3.14 => 3.3.14
      @tarojs/react: ^3.3.14 => 3.3.14
      @tarojs/router: ^3.3.14 => 3.3.14
      @tarojs/runtime: ^3.3.14 => 3.3.14
      @tarojs/taro: ^3.3.14 => 3.3.14
      @tarojs/taro-h5: ^3.3.14 => 3.3.14
      @tarojs/webpack-runner: ^3.3.14 => 3.3.14
      babel-preset-taro: ^3.3.14 => 3.3.14
      eslint-config-taro: ^3.3.14 => 3.3.14
      eslint-plugin-taro: ^3.3.14 => 3.3.14
      react: ^17.0.2 => 17.0.2
      taro-ui: ^3.0.0-alpha.10 => 3.0.0-alpha.10
    npmGlobalPackages:
      typescript: 4.1.3

补充信息

参考这个 #5878
合并到2.x分支了, 是不是next分支没处理.
原因是尺寸转换里 options.rootValue targetUnit 仅支持 platform = weapp/h5/rn, (条件编译必然用实际平台值如 alipay)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React T-alipay Target - 编译到支付宝小程序 V-3 Version - 3.x
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants