vue 使用lib-flexable，px2rem 進行移動端適配 可是引入的第三方UI組件 vux 的樣式縮小，解決方案

最近在寫移動端項目,就想用lib-flexable，px2rem來進行適配,把px轉換成rem可是也用到了第三方UI組件庫vux,把這個引入發現一個問題就是vux的組件都縮小了,在網上找不到答案,最後在一個vue開發羣裏找到了解決的方法,目前的處理方法是將vux組件中px轉化爲PX，避免被轉成rem

在webpack.base.conf.js中 vuxLoader中配置如下代碼

{
  name: 'vux-ui'
},
{
  name: 'after-less-parser',
  fn: function (source) {
    if (this.resourcePath.replace(/\\/g, '/').indexOf('vux/src/components') > -1) {
      source = source.replace(/px/g, 'PX')
    }
    // 自定義的全局樣式大部分不須要轉換
    if (this.resourcePath.replace(/\\/g, '/').indexOf('App.vue') > -1) {
      source = source.replace(/px/g, 'PX').replace(/-1PX/g, '-1px')
    }
    return source
  }
},
{
  name: 'style-parser',
  fn: function (source) {
    if (this.resourcePath.replace(/\\/g, '/').indexOf('vux/src/components') > -1) {
      source = source.replace(/px/g, 'PX')
    }
    // 避免轉換1PX.less文件路徑
    if (source.indexOf('1PX.less') > -1) {
      source = source.replace(/1PX.less/g, '1px.less')
    }
    return source
  }
}

若是是使用cnpm的 就須要把/vux/components那段 要改爲vux/components

使用vue-cli 3.x的,在vue.config.js 配置如下代碼

configureWebpack: config => {
    require('vux-loader').merge(config, {
        plugins: [{
            name: 'vux-ui'
        },{
            name: 'after-less-parser',
            fn: function (source) {
                if (this.resourcePath.replace(/\\/g, '/').indexOf('/vux/src/components') > -1) {
                    source = source.replace(/px/g, 'PX')
                    //資源中有引入1px.less文件的，上面也會將文件名替換成1PX.less，因此要替換回來避免構建報錯
                    source = source.replace(/1PX.less/g,'1px.less');
                }
                    // 自定義的全局樣式大部分不須要轉換
                return source
            }
        },{
            name: 'style-parser',
            fn: function (source) {
                if (this.resourcePath.replace(/\\/g, '/').indexOf('/vux/src/components') > -1) {
                    source = source.replace(/px/g, 'PX')
                    source = source.replace(/1PX.less/g,'1px.less');
                }
                return source
            }
        }]
    })
}

來源

** https://github.com/airyland/v... , 此方法是vux做者提供的解決方法