Vue 项目引入px2rem插件并配置

一、安装依赖

npm install postcss-pxtorem postcss --save-dev

二、创建一个 postcss.config.js 文件在项目根目录下，并配置 postcss-pxtorem

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 设计稿尺寸基准16px，通常是100px，这样会使1rem等于100px
      propList: ['*'], // 转换所有属性单位
    },
  },
};

以上步骤配置完成后，当你构建项目时，postcss-pxtorem 会自动将 CSS 文件中的像素单位（px）转换为 REM 单位。