Vue使用PostCSS 插件和如何使用sass及常用语法

为什么要使用PostCss

 　　转换 px 单位的插件有很多，知名的有 postcss-px-to-viewport 和 postcss-pxtorem，前者是将 px 转成 vw，后者是将 px 转成 rem，精简了不常用的配置。将成为vw优先单位使用，以rem作为回退模式。考虑到vw在移动设备的支持度不如rem，这款插件很好的解决了该问题。然后简单的介绍下。

 

安装指令

$ npm install @ moohng / postcss-px2vw --save-dev

使用方法

先创建一个.postcssrc.js文件，然后配置

 

module.exports = {
  plugins: {
    '@moohng/postcss-px2vw': {}
  }
}

例子：
使用前：

.box {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}

使用后：

.box{
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 0.625rem;
  font-size: 6.25vw;
  line-height: 0.9375rem;
  line-height: 9.375vw;
}