Vue-Cli3配置post-css

vue2.X中使用postcss-pxtorem

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。

前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。

1.安装依赖

npm i postcss-pxtorem@5.1.1 -D

2.设置规则（更改postcss.config.js中的配置）

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,//根元素的像素值
      propList: ['*'], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要取消对边框设置rem，可以写['*', '!border*']
       unitPrecision: 5, //保留rem小数点多少位
      //selectorBlackList: ['.ignore', '.hairline'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
	  mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      minPixelValue: 1, //px小于1的不会被转换	
      exclude: /(\/|\\)(node_modules)(\/|\\)/ // 不转换我们引入的第三方包
    }
  }
}

3 在项目的main.js入口文件中引入设置html标签中font-size的大小：

// 设置 rem 函数
function setRem () {

    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    
//设置根元素字体大小
    document.documentElement.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

Vue2.X中使用postcss-px-to-viewport

postcss-px-to-viewport是PostCSS的插件，用于将像素单元生成vw单位。

1. 安装依赖

npm i postcss-px-to-viewport -D

2. 配置规则（更改postcss.config.js中的配置）

'postcss-px-to-viewport': {
          viewportWidth: 750, // 设计稿宽度
          // viewportHeight: 1334, // 设计稿高度，可以不指定
          unitPrecision: 3, // px to vw无法整除时，保留几位小数
          propList: ['*', '!border*'],
          viewportUnit: 'vw', // 转换成vw单位
          selectorBlackList: ['.ignore', '.hairlines'], // 不转换的类名
          minPixelValue: 1, // 小于1px不转换
          mediaQuery: false, // 不允许媒体查询中转换
          exclude: /(\/|\\)(node_modules)(\/|\\)/ // 不转换我们引入的第三方包
}