vue-cli2、vue-cli3的postcss-pxtorem插件 px转换rem

可查看文档：https://github.com/cuth/postcss-pxtorem  

在vue-cli2中的设置：
在.postcssrc.js文件中设置：

module.exports = {
  "plugins": {
    "postcss-pxtorem":{
      rootValue: 75,
      unitPrecision: 5, // 最小精度，小数点位数
      propList: ['*','!font*'], // !不匹配属性（这里是字体相关属性不转换）
      selectorBlackList: [],
      minPixelValue:2 // 替换的最小像素值
    }
  }
}

rootValue： 根元素(html)的字体大小。可根据js动态设置的html的font-size大小进行设置。（我这里是用了flexible.js动态设置html字体大小又是根据ipone6来设计的图，所以我这里是75）

unitPrecision： 计算后的最小精度值，默认保留的就是5位

propList： 设置哪些属性可以从px变为rem。“！”表示不匹配，“ !font* ”表示不匹配字体相关属性

selectorBlackList： 设置哪些属性选择器（这里是属性选择器）忽略并保留px

minPixeValue： 替换的最小像素值。1px不想被替换就设置为2

如果minPixeValue位置为2了，但想设置border-radius:2px时，这个2px不替换成rem，可将2px改写成2PX(大写字母)或2Px(字母一大一小)

其他参数：
mediaQuery： Boolean类型，是否允许在媒体查询中转换px

在vue-cli3的设置：

在package.json文件中：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75,
        "unitPrecision": 5, 
        "propList": ["*","!font*"], 
        "selectorBlackList": [],
        "minPixelValue":2 
      }
    }
  }

在网上查到是在vue.config.js中这样设置：

但是自己写的vue组件并不能把px转成rem，框架的px却可以转成rem

module.exports = {
    css: {
        loaderOptions: {
          postcss: {
            plugins: [
              require('postcss-pxtorem')({ // 把px单位换算成rem单位
                rootValue: 75,
                unitPrecision: 5, // 最小精度，小数点位数
                propList: ['*','!font*'], // !不匹配属性（这里是字体相关属性不转换）
                selectorBlackList: [],
                minPixelValue:2 // 替换的最小像素值
              })
            ]
          }
        }
      },
}