vue2移动端适配插件‘postcss-pxtorem‘

参考文章

1. 安装

• 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

2.使用

1. 在main.js入口文件引入

import 'amfe-flexible'

2.在根路径创建postcss.config.js配置文件

module.exports = {
    plugins: {
        autoprefixer: {},
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 37.5, // 设计稿宽度的1/10（一般手机端375px）
            "propList": ["*"] 
        }
    }
}

3.处理报错问题

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

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

2. 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

3. 如果需要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 。