目标
通过postcss-pxtorem来实现自动渲染px至rem的开发与生产工作
而不需要再手动计算
实现方式
- postcss-pxtorem：将px转换为px
- amfe-flexible：为html、body添加font-size，窗口调整时候重新设置font-size
安装与使用
- 安装
npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev
注：如果报错，则需要指定postcss-pxtorem版本，如： npm install postcss-pxtorem@5.1.1 --save-dev
- 使用
- 在main.js入口文件引入
import 'amfe-flexible'
- 创建postcss.config.js配置文件
module.exports = {
plugins: {
autoprefixer: {},
// flexible配置
"postcss-pxtorem": {
"rootValue": 75, // 设计稿宽度的1/10
"propList": ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
}
}
}
处理报错问题
- 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
less-loader 、postcss-loader的版本要相互匹配，版本相差不能太大，
建议安装的版本分别为less-loader 7.0.1, postcss-loader 4.0.4 。
可正常运行版本参考
参考图片
