postcss-pxtorem icon indicating copy to clipboard operation
postcss-pxtorem copied to clipboard

Some issue when convert px to rem with vue3+Vant4+vite

Open YakunJin opened this issue 1 year ago • 5 comments

My project uses vue3+Vant4+vite with [email protected], after building the project. Some css files not covert px to rem properly. Anyone know this root cause? image

Project config show as the screen shot below image

YakunJin avatar Oct 08 '24 03:10 YakunJin

I encountered the same problem, how did you solve it?

szmxx avatar Dec 21 '24 03:12 szmxx

把版本降到5.1.1发现可以了,蹲一下原因

StillInTheFuture avatar Jan 20 '25 11:01 StillInTheFuture

same issue

LucasZheng avatar Jan 23 '25 08:01 LucasZheng

downgrade this package to v5.1.1, there is bug in v6.x

zhaojjiang avatar Feb 22 '25 05:02 zhaojjiang

将此软件包降级到 v5.1.1,因为 v6.x 中存在错误

What is the reason?

FengWanMin avatar Sep 02 '25 03:09 FengWanMin

今天我也遇到了这个问题,我调试了一下源代码,发现原因如下:

Image Once和 Declaration 共用的一个变量isExcludeFile 如果每个文件先执行Once,再执行isExcludeFile,完全没有问题。 但是vite中自带一个postcss的插件,叫做 vite-url-rewrite。 它的作用是把css中的url() 转换成编译后的路径,它的Once,是返回的Promise,是一个异步的。这导致了postcss-pxtorem中的执行顺序被打乱了。可能执行好几次Once,才执行一次 Declaration。也可能反着来。 所以如果你的vue文件里面的css,有比如background-image: url这种写法,就会遇到这个问题。就看你运气好坏,运气好上一个文件不是被排除的,你这个文件就能转换,运气不好,上一个文件是被排除的,你这个文件也会当作被排除的,不会转换。 降到5.1.1有用是因为,5.1.1里面的处理方法是一个方法,不会造成顺序混乱

tanxin2025 avatar Dec 18 '25 11:12 tanxin2025