vue使用lib-flexible和postcss-pxtorem(px转rem)进行适配 vue.js

1.开发环境 vue
2.电脑系统 windows10专业版
3.在开发的过程中,我们需要做适配,下面我来分享一下方法,希望对你有所帮助。
4.废话不多说,直接上操作:

//安装 lib-flexible npm install lib-flexible --save-dev

【vue使用lib-flexible和postcss-pxtorem(px转rem)进行适配】5.修改lib-flexible配置

文章图片

// 文件在node_modules>lib-flexible>flexible

5-1.在mian.ts中引入lib-flexible

// 导入 lib-flexible import "lib-flexible";

6.安装postcss-pxtorem(px转rem)

npm install postcss-pxtorem -D

6-1.在根目录下新建.postcssrc.js(和package同级)

module.exports = { "plugins": { "autoprefixer": {}, 'postcss-pxtorem': { rootValue: 19.2, // 75表示750设计稿，37.5表示375设计稿 propList: ['*'] } } }

6-2.你可能会遇到以下报错

文章图片

6-3.分析原因

文章图片

//最高版本是6,找不到8的版本

6-4.解决方法如下:

npm install postcss-pxtorem@5 -D

7.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

vue使用lib-flexible和postcss-pxtorem(px转rem)进行适配