ant-design-vue 4.x + postcss-pxtorem，dev下ant的组件单位没转rem

问题：ant-design-vue 4.x + postcss-pxtorem，dev下（也就是npm run serve）ant的组件单位没转rem，还是px为单位，这导致开发和打包样式不一致，很难进行开发。想想看，dev开发的时候，css的单位都是px，只有build之后才是rem，而我实际上需要看的是rem的效果，这要怎么开发呢，难道每改一次都要build之后再看效果吗？

原因：ant-design-vue 4.x使用cssinjs，所以dev下postcss-pxtorem不会对ant的组件生效github.com/vueComponen… ，也就是说，dev下的css代码根本不会形成css文件，都是嵌入js文件里，所以postcss-pxtorem根本无从作用。

解决：ant-design-vue的开发同学加了个px2remTransformer，用上就行了。在App.vue里，加上a-style-provider（我是ant-design-vue 4.0.6）：

<template>
  <a-style-provider :transformers="[px2rem]">
      <div class="app">
        <Header/>
        <router-view/>
        <Footer/>
      </div>
  </a-style-provider>
</template>

<script setup>
import { px2remTransformer } from 'ant-design-vue';

const px2rem = px2remTransformer({
  rootValue: 16, // @default 16
});

</script>
<style>
</style>

坑点： 首先不知道ant-design-vue 4.x在dev下是cssinjs的，我还以为是postcss-pxtorem出问题了，vue.config.js和postcss.config.js搞了一上午，一无所获脑袋都要炸了。后面解决问题是去ant-design-vue的github的issue上，搜rem，才找到相关的issue，明白原来跟postcss-pxtorem没关系。

第二个坑点是官方加了px2remTransformer，但是没更新官方文档，不知道怎么用，后来看到这个issue（github.com/vueComponen… ） ，里面提到ant-design-react已经支持px2remTransformer了，于是去看ant-design-react的文档，依葫芦画瓢在vue的项目上配置，才解决了。

想着可能有很多人还不知道，于是写篇文章说一下。