postcss-plugin-px2rem和postcss-px2rem-exclude使用方法

npm i postcss-px2rem-exclude  -D
链接：https://www.npmjs.com/package/postcss-px2rem-exclude


.postcssrc.js
module.exports = {
  'plugins': {
    'postcss-px2rem-exclude': {
      remUnit: 75,
      propList: ['*','!border'],
//这里的大小等于rem.js里面的scale最好是75 10 或者37.5 20 （可能是因为插件的标准就是75）
//remUnit的值很小的话比列严重失调 至于原因还不知道 
      exclude: /node_modules|folder_name/i   //过滤插件
    }
  }
}

rem.js
const baseSize = 10
// 设置 rem 函数
function setRem () {

const scale = document.documentElement.clientWidth / baseSize  ;
// 设置页面根节点字体大小
document.documentElement.style.fontSize = scale + 'px'
  }
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
       setRem()
}

main.js 引入rem.js
import "./rem.js" 
   //可以用npm i lib-flexible -S 
  //import "./lib-flexible" 代替 

// postcss-plugin-px2rem
//https://www.npmjs.com/package/postcss-plugin-px2rem
// npm i  postcss-plugin-px2rem --D

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-plugin-px2rem": {
//        rootValue: 32,//rootValue是html的font-size的2倍(猜测是和dpr有关)
    rootValue: 75,//配合lib-flexible使用 750的设计稿
    unitPrecision: 5,
      mediaQuery: true,
      // exclude:"/node_modules/i",//错误写法  不能是字符串
      exclude: /(node_module)/i,
      selectorBlackList: ['html', 'mint-', 'mt-', 'mpvue-', 'calendar', 'iconfont'], //在rem.js全局作用下   排除指定的文件的影响
      propBlackList: ['border'] //过滤属性
    }
  }
}

//npm i lib-flexible -S 
main.js
import "./lib-flexible" 代替 

推荐使用postcss-plugin-px2rem 因为支持更多属性(过滤单个属性 、文件夹、排除ui插件)