Vu3 + amfe-flexible + postcss-pxtorem 实现PC端px转rem实现响应式

• 安装依赖

yarn add amfe-flexible --dev
yarn add postcss-pxtorem --dev

• 在main.ts中引入依赖

import "amfe-flexible/index.js";

• 第三步网上大部分教程是在config.json中配置

 postcss: {
          plugins: [
            require("postcss-pxtorem")({
              rootValue: 192, //根元素字体大小 根据设计的宽度的，我的ui图是1920*1080的
              propList: ["*"], //可以从px转换为rem的属性，匹配正则
              // unitPrecision:5, //允许rem单位增长的十进制数字 保留的小数位数
              // replace:true, //替换包含rems的规则，而不添加后备
              // mediaQuery:false, //允许在媒体查询中转换px
              // minPixelValue:0, //设置要替换的最小像素值
              // selectorBlackList:[], //忽略转换正则匹配项
              // exclude:/node_modules/i  要忽略并保留为px的文件路径
            }),
          ],
        },

到这里基本的配置已经完成了，在画页面的时候根据ui图写px的单位插件会帮我们转成rem。但是我做完这几部其实是并未生效的，于是在网上试了各种方法。

如果你跟我一样到这一步不生效的话可以先检查一下这几个插件安装是否生效了。
amfe-flexible 动态改变根字体的大小（会在html上自动添加上font-size）
如果使用的是lib-flexible 还会有一个dpr属性

• 如果html标签上有fontsize属性但页面还是没有变化的话，就在根目录上添加一个postcss.config文件，与vite.config.ts同级

module.exports = {
 "plugins": {
   "postcss-pxtorem": {
     rootValue: 192, 
     propList: ['*'],
     selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
   }
 }
}

内容与config.ts中配置的一致
我是到这一步就生效了，但是还是存在不少问题，比如svg的图标大小不会变化，还有部分组件库组件也没有变化。