css px 转成 vw 插件 像素单位批量转换

1.安装

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

2.配置postcss.configs.js

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},


    "postcss-px-to-viewport": {//只配置这个对象
      viewportWidth: 375, //视窗的宽度，对应我们设计稿的宽度，一般指retina（一个点两个像素），宽度750
      viewportHeight: 667, //视窗的高度，对应我们设计稿的高度，可以不配置
      unitPrecision: 5, //指定`px`转化成视窗单位值的小数位数（很多时候不能整除）
      viewportUnit: 'vw', //指定需要转换的视窗单位 建议'vw'
      selectorBlackList: ['ignore'], //指定不需要转换的类
      exclude: [], //指定不要转换的文件，数组内应该是正则表达式
      minPixelVaule: 1, //小于或者等于1px不转换为视窗单位
      mediaQuery: false , //允许在媒体查询中转换'px'
    }
  }
}

 配置前

 配置后