在vue3中如何使用postcss-px-to-viewport

在Vue3中使用postcss-px-to-viewport可以按照以下步骤进行：

1.安装postcss-px-to-viewport库：

npm install postcss-px-to-viewport --save-dev

2.在项目根目录下创建postcss.config.js文件，并添加以下代码：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750, // 设计稿宽度
      unitPrecision: 5, // 小数位数
      viewportUnit: 'vw', // 转换成vw单位
      selectorBlackList: [], // 不转换的类名
      minPixelValue: 1, // 小于等于1px不转换
      mediaQuery: false, // 允许在媒体查询中转换px
      exclude: /(\/|\\)(node_modules)(\/|\\)/ // 排除node_modules文件夹下的文件
    }
 }
}

3.在vue.config.js文件中添加postcss配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            viewportWidth: 750, // 设计稿宽度
            unitPrecision: 5, // 小数位数
            viewportUnit: 'vw', // 转换成vw单位
            selectorBlackList: [], // 不转换的类名
            minPixelValue: 1, // 小于等于1px不转换
            mediaQuery: false, // 允许在媒体查询中转换px
            exclude: /(\/|\\)(node_modules)(\/|\\)/ // 排除node_modules文件夹下的文件
          })
        ]
      }
    }
  }
}

4.重启项目即可实现px转vw。