使用postcss-pxtorem和lib-flexible来实现vue项目自动将px转成rem

  有时候我们为了前端页面可以匹配不同分辨率的屏幕,会使用rem来对页面进行布局,无论基础px值设置得多么好计算,在写rem数值的时候,都需要对设计图原始的px值进行一番换算。

  有没有工具可以辅助我们自动进行计算,我只要写px值就好了呢?当然是有的,编辑器其实就可以配置插件来对数值进行换算。但是有时候,我们在使用一些第三方ui库时,也想要对他们的px值进行转换,该怎么办呢?

  当当当当,来介绍一下两个好朋友,postcss-pxtorem 和 lib-flexible ,安装配置这两个依赖,我们就可以实现我们想要的功能啦。

  1. 首先,我们来安装一下这两个包

  npm安装方式:

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

   yarn安装方式:

yarn add amfe-flexible
yarn add postcss-pxtorem --dev

  

  2. 在main.js中引入lib-flexible

import 'amfe-flexible'

 

   3. 配置postcss-pxtorem

  • vue-cli2配置方式:

    在.postcss.js文件中的plugins下新增postcss-pxtorem的配置

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 192, // 根据设计图尺寸写,设计图是1920,就写192
        propList: ['*'], // 需要被转换的属性
        selectorBlackList: [] // 不进行px转换的选择器
    }
  }
}

 

  • vue-cli3配置方式:
    在根路径下新增postcss.config.js文件(如果有,就不新增)
    配置的内容与上相同
 
 
  完成上述步骤后,就可以愉快得使用设计图里的px值进行代码编写了。如果设计图的宽度是1920,则给rootValue设置192就行,lib-flexible会帮助我们计算好根字体。
  postcss-pxtorem也可单独使用,但是相应的我们得自己写一个根字体的计算代码,以及视图窗口大小变化的监听事件,比较起来,还是配合lib-flexible比较省时省力。
 
  PS:如果部分设计样式不想转换为rem,可以将 px 改为 PX ,就不会对该数值进行转换了,但是这一点在 calc 计算属性中是不生效的,开发模式下没有问题,但是打包时会出现编译错误(截至postcss-pxtorem 4.0.1版本哈,后续也许作者会修复这个问题),这个时候需要配合 selectorBlackList 来设置一个class来取消px的转换。
 
 
posted @ 2020-03-02 19:01  吃火鸡的馒头  阅读(4049)  评论(0编辑  收藏