postcss 将px转换成rem vuecli3+vant+vue+postcss

2019/11/05 10:21
阅读数 202

1.安装 npm install postcss-pxtorem --save

2.找到postcss.config.js 

默认是这样
module.exports = {
  "plugins": {
    "autoprefixer": {},
  }
}
修改成这样
module.exports = {
  "plugins": {
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    "postcss-pxtorem": { 
      "rootValue": 37.5, 根据UI提供的375尺寸来,如果设置rootValue等于75,那么按照UI提供的750尺寸来
      "propList": ["*"]
    }
  }
}

3.重启项目即可

 

如果在项目中使用了Vant UI,这样设置会导致Vant里的样式很多都改变,那我们即想用Vant又想用postcss怎么办呢?

打开postcss.config.js 粘贴复制即可实现
const autoprefixer = require('autoprefixer') const pxtorem = require('postcss-pxtorem') module.exports = ({ file }) => { let rootValue if (file && file.dirname && file.dirname.indexOf('vant') > -1) { rootValue = 16 } else { rootValue = 37.5 } return { plugins: [ autoprefixer(), pxtorem({ rootValue: rootValue, propList: ['*'], minPixelValue: 2 }) ] } }

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部
返回顶部
顶部