解決lib-flexible,第三方ui樣式縮小

xuuuui發表於2018-07-31

vue專案下一開始用的是lib-flexable,px2rem,但是發現引入ui框架時樣式會縮小,以為是轉換的問題,然而px2rem沒有配置過濾。。就找到了postcss-pxtorem,在配置項下過濾了iview樣式

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-pxtorem

方法

找到node_modules/postcss-pxtorem/index.js新增

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應該也行,沒測試

之前在網上找不到答案,解決了和大家分享一下,不足之出歡迎大家指出

相關文章