Vite配置postcss-px-to-viewport

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

通过创建postcss.config.js配置文件配置


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

export default {
  plugins: [
    pxToViewport({
      unitToConvert: 'px',         // 要转换的单位，默认为 'px'
      viewportWidth: 375,          // 设计稿的宽度（例如 750px 或 375px）
      viewportHeight: 667,         // 设计稿的高度，通常不需要修改
      unitPrecision: 5,            // 转换后的小数点精度
      viewportUnit: 'vw',          // 转换后的单位，通常为 'vw'
      selectorBlackList: [],       // 排除不需要转换的 CSS 选择器
      minPixelValue: 1,            // 小于或等于此值的 px 不转换
      mediaQuery: false,           // 是否在媒体查询中转换 px
      exclude: /node_modules/      // 排除不需要转换的目录或文件
    })
  ]
};



或者通过vite.config.js


import { defineConfig } from 'vite';
import pxToViewport from 'postcss-px-to-viewport';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        pxToViewport({
          unitToConvert: 'px',
          viewportWidth: 375,
          viewportHeight: 667,
          unitPrecision: 5,
          viewportUnit: 'vw',
          selectorBlackList: [],
          minPixelValue: 1,
          mediaQuery: false,
          exclude: /node_modules/
        })
      ]
    }
  }
});

/* 原始 CSS */
.container {
  width: 750px;
  padding: 20px;
}


/* 转换后的 CSS */
.container {
  width: 100vw; /* 750px 转换为 vw */
  padding: 2.6667vw; /* 20px 转换为 vw */
}