vue中使用postcss-pxtorem实现适配

 

场景vue后台管理系统全局字体修改时，main.js引入全局css报错。

原因：用了postcss-px2rem与postcss-px2rem-exclude导致的问题，

解决方案：卸载后postcss-px2rem， 安装使用postcss-pxtorem。在postcss.config.js设置如下代码，可以自行更改设置，解决问题。

安装amfe-flexible和postcss-pxtorem

npm install postcss-pxtorem -S

npm install amfe-flexible -S

postcss-pxtorem将px转为rem；

amfe-flexible可进行屏幕自适应；

配置及使用

1、在main.js中引入amfe-flexible

import Vue from 'vue'

import Cookies from 'js-cookie'

import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import  "amfe-flexible";

2、根目录下添加postcss.config.js 和vue.config.js同级 没有自己创建一个

module.exports = () => ({

  plugins: [

    // autoprefixer 自动补齐 CSS3 前缀，适配不同浏览器

    require('autoprefixer')({

      overrideBrowserslist: [

        'last 10 versions' // 所有主流浏览器最近10版本用

      ]

    }),

    require('postcss-pxtorem')({

      rootValue: 192, //设计稿元素尺寸/10，这里设计稿宽度为1920 改变这个值可以放大缩小字体

      propList: ['font-size'], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']

      unitPrecision: 3, //保留rem小数点多少位
      selectorBlackList:[],
      // selectorBlackList: ['el-input', 'el-step', 'no-'],//则是一个对css选择器进行过滤的数组，比如你设置为['el-']，那所有el-类名里面有关px的样式将不被转换，这里也支持正则写法。
      replace: true,

      mediaQuery: false //媒体查询( @media screen 之类的)中不生效

      // minPixelValue: 3, //px小于3的不会被转换

    })

  ]

})

配置完成之后，重启即可

可能遇到问题

运行报错如下

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

这个问题 降版本就行了

npm i postcss-pxtorem@5.1.1