解决 ant-design-vue 4.x 和 postcss-pxtorem 在开发环境中无法转换为 rem 的问题

在使用 ant-design-vue 4.x 和 postcss-pxtorem 时，开发环境下（npm run serve）发现 ant-design-vue 组件的样式依然是 px 而不是预期的 rem，主要原因是 ant-design-vue 使用了 css-in-js，这导致 postcss-pxtorem 无法在开发模式下生效。

解决方案：

引入 px2remTransformer：ant-design-vue 4.x 提供了 px2remTransformer 来解决此问题。它能在开发环境中将 px 单位转换为 rem。
配置 a-style-provider：在 App.vue 中，使用 a-style-provider 组件包裹应用，并配置 px2remTransformer，以使开发模式下的样式与打包后的效果一致。

代码示例：

<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';

// 设置ant-design-vue 的 rem 配置
const px2rem = px2remTransformer({
  rootValue: 192, // 1920宽 跟 postcsspxtorem 保持一致
});

</script>

总结

在使用 ant-design-vue 4.x 和 postcss-pxtorem 时，开发环境中的样式转换为 rem 的问题，主要是因为 ant-design-vue 使用了 css-in-js，而 postcss-pxtorem 只能在传统的 CSS 文件中起作用。通过引入 px2remTransformer 并结合 a-style-provider 组件，我们可以在开发模式中看到与打包后一致的 rem 单位样式。

虽然 px2remTransformer 功能非常有用，但官方文档的更新较慢，导致许多开发者在使用时遇到困难。希望通过这篇博客，能够帮助更多开发者顺利解决类似的问题，提升开发效率。