vite-plugin-cy-pxrem

基于 vite-plugin-cy-rem 插件封装的 vite 插件，适用于移动端适配 自动转换 px 为 rem

npm

📦 安装

npm i vite-plugin-cy-pxrem -D

🦄 使用

import cyVitePxToRem from 'vite-plugin-pxrem';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        cyVitePxToRem({
          //根标签的字体规定为1rem为75px, 750的设计稿 量多少px写多少px
          rootValue: 100,
          //排除在外的选择器列表，匹配到的选择器不会进行单位转换 (默认  ['ignore-'])
          selectorBlackList: ['ignore-'],
          //设置要替换的最小像素值
          minPixelValue: 2,
          //转换后的 rem 保留小数的精度，默认为 5 位小数
          unitPrecision: 5,
          //只对这个列表内的 CSS 属性进行单位转换（若为空，则对所有属性生效）
          propWhiteList: [],
          //在这个列表内的 CSS 属性不进行单位转换
          propBlackList: [],
          //忽略的文件 (默认 /(node_module)/ )
          exclude: /(node_module)/,
          //忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true
          ignoreIdentifier: false,
          //是否替换原有的 px 值，如果为 false，则在原有 px 的基础上增加 rem
          replace: true
        })
      ]
    }
  }
});