移动端布局方案 postcss-pxtorem

Posted 2022-10-21 ur home

愿景

通过postcss-pxtorem来实现自动渲染px至rem的开发与生产工作

实现方式

• postcss-pxtorem：将px转换为px
• lib-flexible：为html、body添加font-size，窗口调整时候重新设置font-size

安装与使用

npm install lib-flexible
npm install postcss-pxtorem -D

如果报错，则需要指定postcss-pxtorem版本，如： npm install postcss-pxtorem@5.1.1 --save-dev

• 使用
  在main.ts入口文件引入

import 'lib-flexible'

      vue.config.js

loaderOptions: 
      postcss: 
        plugins: [
          require('postcss-pxtorem')( // 把px单位换算成rem单位
            rootValue: 37.5, // vant官方使用的是37.5
            selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          )
        ]
      
    ,

处理报错问题

• Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

缺少相应的插件（安装包） postcss 和 postcss-loader，安装这两个插件即可；

• postcss-loader@5.2.0 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.

降低 postcss-pxtorem 的版本，删除已有的postcss-pxtorem版本，安装指定版本
npm i postcss-pxtorem@5.1.1 --save-dev

• 如果需要less-loader，碰到 Syntax Error: TypeError: this.getOptions is not a function

可正常运行版本参考

 

https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users