@isludy/postcss-unit-parser v1.0.4

postcss-unit-parser

介绍

webpack插件：用于将自定义单位转vw或rem

安装教程

npm i --save-dev postcss-unit-parser

使用说明

import UnitParser from 'postcss-unit-parser'

UnitParser(options, ignore)

参数

1. options: Object

   {
       [string]: {        //[string] 是自定义的单位，默认: px，多个用英文逗号分隔，如: 'px,vp'，则单位为px和vp的值都将被转为vw
           base: 375,     //设计稿宽度依据，默认: 375
           decimal: 3,    //计算精度，默认: 3（保留3位小数）
           min: 1,        //最小值，值大于此值时，忽略，默认: 1
           unit: 'vw',    //输出单位，默认: vw
           times: 100     //相关倍率系数，不同单位意义不同
           /**
            * vw时，times计算逻辑：
            *    满屏100vw，希望375vp转换为100vw，
            *    那么，1vw = 3.75vp，所以，times = 375vp/3.75vp = 100
            *    即 375vp = 100vw
            * 
            * rem时，times计算逻辑：
            *    由于浏览器的最小字体支持9-12px不等，安全起见，以375屏12px为下限，即，希望375屏下，html的font-size: 12px
            *    那么，375rp转为rem则是 375rp = times * 12px
            *    所以，times = 375rp / 12px = 31.25
            *    即 375rp = 31.25rem
            *    html的font-size = window.innerWidth / 31.25 = window.innerWidth / (base / 12)
            */
       }
   }
   // 示例
   UnitParser({
       'vp,px': {
           base: 375,
           decimal: 3,
           min: 1,
           unit: 'vw',
           times: 100
       },
       'rp': {
           base: 375,
           decimal: 2,
           min: 1,
           unit: 'rem',
           times: 31.25
       }
   })

2. ignore: RegExp | RegExp[] 忽略的目录或文件，默认 /node_modules\//