vue3使用postcss-px2rem

Vue 3是一种流行的JavaScript框架，用于构建用户界面。而postcss-px2rem是一个PostCSS插件，用于将像素单位（px）转换为rem单位，以实现响应式布局。

在Vue 3中使用postcss-px2rem，你需要按照以下步骤进行配置：

1. 首先，确保你已经安装了Vue CLI，并创建了一个Vue项目。

2. 在项目根目录下找到postcss.config.js文件（如果没有则创建一个），并添加以下代码：

module.exports = {
  plugins: {
    'postcss-px2rem': {
      remUnit: 75 // 这里的值根据你的设计稿决定，一般为设计稿宽度/10
    }
  }
}

这里的remUnit表示1rem对应的像素值，根据你的设计稿决定。一般情况下，可以将设计稿的宽度除以10作为remUnit的值。

3. 接下来，在项目的根目录下找到vue.config.js文件（如果没有则创建一个），并添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 75 // 这里的值与上面保持一致
          })
        ]
      }
    }
  }
}

这样配置后，Vue 3会自动将CSS中的像素单位转换为rem单位。