在uniappx中，如何可以把默认单位转为px呢？

[hujinchen]

现在好像只支持这个配置：rem2rpx: true。 我想把所有的单位默认都转为px要如何实现

[sonofmagic]

@hujinchen 这个 rem2rpx 和 px2rpx 都只是把 rem / px 这种 css 单位，转换成 rpx

你的需求是 所有 css 单位，不论是 rem,vw,vh, rpx 都转换成 px?

这个恐怕实现起来会有一些变扭，我想知道你什么场景下，需要这种行为呀?

[hujinchen]

就是说在uniappX中官方推荐用的长度单位是px。性能也好。不管是rpx还是百分比单位，都需要在运行时再计算，转换为时间的px进行渲染。 我目前只能一个个转换单位。如图 涛 ***@***.***

[sonofmagic]

你想要的这个功能，可以通过编写 postcss 插件来做到，当然，你需要提前定义好，各个css单位转化成 px 的规则，这个实现起来其实挺容易的，主要是你这个规则怎么做转化。

[hujinchen]

我不会，大佬你内置一个呗。后面uniappx用的人多起来的话，应该很多人都想要这样用 涛 ***@***.***

[sonofmagic]

@hujinchen
也可以，那你告诉我一下，你大概有哪些 css 单位，想要被转化成 px，毕竟你看 CSS单位 20多个，我也不可能所有单位都兼容的。

[hujinchen]

可以参考下这篇文档：https://doc.dcloud.net.cn/uni-app-x/css/common/length.html 我想要的是，如果原tailwindcss中的单位是 rem或rpx、em的话，可以通过一个配置默认转为px。 然后如果原tailwindcss中的单位是用%、vw、vh等这些就不用转了。 涛 ***@***.***

[sonofmagic]

@hujinchen
在 4.9.8 版本中，我添加了 unitsToPx 配置，这个可以 进行 多单位转 px 的转换配置。
详见 https://tw.icebreaker.top/docs/api/options/important#unitstopx
和 https://tw.icebreaker.top/docs/quick-start/css-unit-transform#%E5%A4%9A%E5%8D%95%E4%BD%8D%E8%BD%AC-pxunitstopx

[hujinchen]

感觉没生效啊，最终生成的单位还是rem。 还有我如何可以1比1的转换呢？就比如我输入w-80 输出width:80px; mr-10 输出margin-right:10px. 涛 ***@***.***

[sonofmagic]

我是在这个分支做的测试
https://github.com/icebreaker-template/uni-app-x-hbuilderx/tree/debug

然后我看所有css 单位转换成 px 是生效的

unpackage/dist/dev/.uvue/app-android/components/WeappTailwindcss.uvue

编译的中间产物都是固定的 px 值

        UnifiedViteWeappTailwindcssPlugin(
            uniAppX({
                base: __dirname,
                unitsToPx: true
            }),
        ),

[sonofmagic]

1比1的转换的话，你可以去更改 tailwind.config.js
https://v3.tailwindcss.com/docs/configuration
把你的规则写进去
当然更好的方式可以把你的规则，提炼成一个 tailwindcss 插件

[hujinchen]

你这还有个bug。 只要我再uts中 在类名前面加上！在app端编译出来的结果有问题！ ！会被编译为_e了， 在web端则无此问题。小程序端好像也会有问题。 涛 ***@***.***

[sonofmagic]

这个是因为 tailwindcss 中比如一个类名之前或者之后加上 !, 比如 !w-0 这就变成了 !important 的 css
这也是有意义的，而小程序类名是不支持 ! 这个字符的，所以就被转译成了 _e 来让小程序支持，uni-app-x 同理
这是一个预期的行为
详见 https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-modifier

[hujinchen]

你这项目跑起来也是一样啊， unitsToPx: true 设置后 并没有改变最终输出的单位是px。 涛 ***@***.***

[hujinchen]

不是，转义归转义，但是这样变成只有在web端才有效果了。 无论输出的是什么类名，它没有加上 !important 且 样式也没有生效，这就不对了！ 涛 ***@***.***

[hujinchen]

哦哦，那还是跟我之前做法差不多。我以为让你加的这个转px的功能就是1比1的转换。我写个 w-50 输出结果就是width: 50px. 不是这样理解的嘛 涛 ***@***.***