最近在写一个移动项目,想用lib-flexable和px2rem适配。我把px转为rem也用了第三方UI组件库vux。我发现这个介绍有问题,vux的组件都缩水了。在网上没找到答案,最后在一个vue开发群里找到了解决办法。目前的处理方式是将vux组件中的px转为PX,避免在webpack.base.conf.js中的vuxLoader中转为rem配置如下代码{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')}returnsource}},{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')}returnsource}}如果你使用的是cnpm,需要把/vux/components的部分改成vux/com组件使用vue-cli3.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替换掉,所以替换掉back避免构建错误source=source.replace(/1PX.less/g,'1px.less');}//大部分自定义全局样式不需要转换returnsource}},{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');}returnsource}}]})}source**https://github.com/airyland/v...,该方法是vux作者提供的解决方案
