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

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

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

5.修改lib-flexible配置
vue使用lib-flexible和postcss-pxtorem(px转rem)进行适配_第1张图片

// 文件在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.你可能会遇到以下报错
vue使用lib-flexible和postcss-pxtorem(px转rem)进行适配_第2张图片
6-3.分析原因
vue使用lib-flexible和postcss-pxtorem(px转rem)进行适配_第3张图片

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

6-4.解决方法如下:

npm install postcss-pxtorem@5 -D

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

你可能感兴趣的:(vue.js)