postcss-pxtorem设置不转换UI框架的CSS单位问题
作者:一捆铁树枝
这篇文章主要介绍了postcss-pxtorem设置不转换UI框架的CSS单位问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
postcss-pxtorem设置不转换UI框架的CSS单位
在移动端项目中使用postcss-pxtorem做适配,同时也使用到了第三方UI库(vant)。
这时就出现了一个问题。
第三方UI库使用的是px,而postcss将页面中的px 全部转化成了rem.导致样式缩小。
查询postcss配置文档后发现 其提供了selectorBlackList 属性来忽略掉某些选择器,vant-UI组件库的CSS都是以.van开头的 因此我只需要将 .van 忽略掉就好
具体配置如下:
module.exports = { plugins: { // 这个工具可以实现自动添加CSS3前缀 "autoprefixer": { overrideBrowserslist: ['last 5 version', '>1%', 'ie >=8'] }, //如果你使用rem来实现移动端多设备适配,这个工具可以把px转换为rem "postcss-pxtorem": { rootValue: 100, // 指定转换倍率,我现在设置这个表示1rem=100px; minPixelValue: 1, // 需要转换的最小值,一般1px像素不转换,以上才转换 unitPrecision: 6, // 转换成rem单位的小数点后的保留位数 selectorBlackList: ['.van'], // 匹配不被转换为rem的选择器 propList: ['*'], // 属性列表,表示你要把哪些css属性的px转换成rem,这个*表示所有 replace: true, // 替换包含rem的规则,而不是添加回退 mediaQuery: false // 允许在媒体查询中转换px } } }
postcss-pxtorem px不转换为rem的做法
有些场景是不要px转为rem的时候,如果不想设置vscode的vetur的设置,当然也不建议设置,除非团队每个人都设置,要不然就会被保存格式化,PX都会转为px
所以采用如下做法:
postCssPxToRem({ // 自适应,px>rem转换 rootValue: 192, // 根据设计图尺寸写,设计图是 1920,就写 192 propList: ['*'], // 需要转换的属性,这里选择全部都进行转换 selectorBlackList: ['-nopx'], // 过滤掉-nopx结尾的class,不进行rem转换 }),
实际代码设置如下:
<div id="lightEchart-nopx"></div>
效果如图:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。