1.执行指令

yarn add --dev postcss-pxtorem

在vite.config.ts中引入并配置

import postcssPxtorem from "postcss-pxtorem";

因为vite中并不支持require引入，所以采用import引入,并进行配置

  css: {
    preprocessorOptions: {
//less配置，不需要注释掉
      less: {
        math: "always", // 括号内才使用数学计算
        globalVars: {
          // 全局变量
          mainColor: "red",
        },
      },
    },
    postcss: {
      plugins: [
        postcssPxtorem({
          rootValue: 37.5, // UI设计稿的宽度/10
          unitPrecision: 3, // 转rem精确到小数点多少位
          propList: ["*"], // 需要转换的属性 *表示所有
          selectorBlackList: ["ignore"], // 不进行px转换的选择器
          replace: true, // 是否直接更换属性值，而不添加备用属性
          mediaQuery: false, // 是否在媒体查询的css代码中也进行转换
          minPixelValue: 0, // 设置要替换的最小像素值
          exclude: /node_modules/i, // 排除node_modules文件夹下的文件
        }),
        autoprefixer,
        tailwindcss,
      ],
    },
  },

在创建一个rem.tsx文件 内容如下，再在入口文件中去引入该文件

// 判断是否是PC端
const isPc = !/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/i.test(
  navigator.userAgent
);
// 设置基础根文件大小
let baseSize = 37.5;
// rem 函数
function setRem() {
  const clientWidth = document.documentElement.clientWidth;
  // 设计稿一般都是以375的宽度
  let scale = clientWidth / (baseSize * 10);
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  let enlarge = 1.5;
  if (isPc) {
    enlarge = 1;
    scale = clientWidth / 980; // 980 是PC端设计稿的宽度
  }
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, enlarge) + "px";
}
// 调用方法
setRem();

// 监听窗口在变化时重新设置跟文件大小
window.onresize = function () {
  setRem();
};

export default {};

引入使用

react项目在main.tsx入口文件中引入并使用，vue项目则在main.ts入口文件中引入使用

最后打开控制台查看插件是否引入成功

由px单位转换为rem单位，即为成功！！

适用于vite创建的react或vue项目