解决lib-flexible,第三方ui样式缩小

vue项目下一开始用的是lib-flexable,px2rem,可是发现引入ui框架时样式会缩小,觉得是转换的问题,然而px2rem没有配置过滤。。就找到了postcss-pxtorem,在配置项下过滤了iview样式css

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {browsers: ['defaults']},
    "postcss-pxtorem": {
      "rootValue": 75,
      "propList": ['*', '!border*'],
      // 注意:若是有使用第三方UI如VUX,则须要配置下忽略选择器不转换。
      // 规则是class中包含的字符串,如vux中全部的class前缀都是weui-。也能够是正则。
      "selectorBlackList": ['ivu-']
    }
  }
}
复制代码

结果开了火狐,样式恢复,觉得解决了。直到有一天打开chrome模拟器,样式居然又缩小了!!!!!!!! 花了半天时间才发现火狐模拟时dpr没变化一直都是1,而chrome的dpr正常变化,因此缩小了。。坑。。。 后来想着干脆把dpr固定1算了,可是一直不舒服。。。就本身改了postcss-pxtoremvue

方法

找到node_modules/postcss-pxtorem/index.js添加node

return function (css) {

        css.walkDecls(function (decl) {
            if (/ivu-/g.test(decl.parent.selector)) {
                if (decl.value.indexOf('px') === -1) return;
                let vlist = decl.value.split(" ")
                for(let j = 0; j < vlist.length; j++) {
                    if (vlist[j].indexOf('px') === -1) continue
                    let num = parseInt(vlist[j].match(/\d+px/g)[0].replace('px', '')) * 2
                    vlist[j] = vlist[j].replace(/\d+px/g, num.toString() + 'px')
                }
                let v = vlist.join(' ')
                decl.value = v
            }
        })
    ###
复制代码

/ivu-/g 匹配ui样式前缀 * 2 是设计稿倍数 替换一下别的ui应该也行,没测试chrome

以前在网上找不到答案,解决了和你们分享一下,不足之出欢迎你们指出

相关文章
相关标签/搜索