VW 转 PX 转换器

// 基于750px设计稿的vw转换函数
@function vw($px) {
  @return ($px / 750) * 100vw;
}

// 使用示例 - 蓝湖标注值直接填入
.header {
  width: vw(750);      // 100vw 全屏
  height: vw(88);      // 11.73vw 导航栏
  padding: 0 vw(30);   // 左右各4vw
  font-size: vw(28);   // 3.73vw 标题
}

.card {
  width: vw(345);      // 46vw 卡片宽度
  margin: vw(15);      // 2vw 间距
  border-radius: vw(16); // 2.13vw 圆角
}

// 编译后:
// .card { width: 46vw; margin: 2vw; }

// vite.config.js
import postcsspxtoviewport from 'postcss-px-to-viewport';

export default {
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          viewportWidth: 750,  // 设计稿宽度
          unitPrecision: 5,    // 精确到5位小数
          viewportUnit: 'vw',  // 转换单位
          selectorBlackList: ['.ignore', '.van'],
          // 忽略Vant组件库
          minPixelValue: 1,    // 小于1px不转换
          mediaQuery: false,   // 媒体查询不转换
          exclude: [/node_modules/] // 排除第三方
        })
      ]
    }
  }
}

// vue.config.js 或 webpack.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px-to-viewport')({
            viewportWidth: 750,
            unitPrecision: 5,
            viewportUnit: 'vw',
            selectorBlackList: [
              '.van',        // Vant UI
              '.el',         // Element UI
              '.ignore'      // 自定义忽略类
            ],
            propList: ['*'], // 所有属性都转换
            exclude: [
              /node_modules/vant/,  // 排除Vant
            ]
          })
        ]
      }
    }
  }
}