vue2移动端适配插件‘postcss-pxtorem‘
vue2移动端适配插件‘postcss-pxtorem‘
·
参考文章
安装
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.使用
在main.js入口文件引入
import 'amfe-flexible'
2.在根路径创建postcss.config.js配置文件
module.exports = {
plugins: {
autoprefixer: {},
// flexible配置
"postcss-pxtorem": {
"rootValue": 37.5, // 设计稿宽度的1/10(一般手机端375px)
"propList": ["*"]
}
}
}
3.处理报错问题
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 。
更多推荐
所有评论(0)