vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后在一个vue开发群里找到了解决的方法,目前的处理方法是将vux组件中px转化为PX,避免被转成rem
可以参考一下这篇文章vue中的适配:px2rem
在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作者提供的解决方法
原文地址:https://segmentfault.com/a/1190000016866076
vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案的更多相关文章
- vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...
- vue使用flexible和px2rem实现移动端适配
首先下载flexible.js和px2rem npm install px2rem-loader 对webpack进行配置.进入build文件夹对utils.js中的postcssLoader做如下修 ...
- vue-cli3.0 flexible&px2rem 解决第三方ui组件库样式问题
背景 在项目使用lib-flexible还有postcss-px2rem实现移动端适配,当我们引入第三方的样式组件库,发现一个问题.那些组件库的样式都变小了. 问题原因 变小的主要原因是第三库 css ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
- 如何在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...
- 解决vue webApp使用lib-flexible和px2rem引用第三方ui库后,样式变小问题
首先,需要卸载项目中的postcss-px2rem. npm uninstall postcss-px2rem --save-dev 其次,安装postcss-px2rem-exclude npm i ...
随机推荐
- C# ExpandoObject用法
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- redis之五大数据类型
redis之五大数据类型 redis redis的两种链接方式 简单链接 1234 import redisconn = redis.Redis(host='10.0.0.200',port=6379 ...
- 题解 UVA11354 【Bond】
并查集+按秩合并 传送门 大意:给出一张n个点m条边的无向图, 每条边有一个权值,有q个询问, 每次给出两个点s.t,找一条路, 使得路径上的边的最大权值最小. 我们可以发现,跑最小生成树会跑挂, 那 ...
- Codeforces 140F(坐标系点对称)
要点 结论:如果坐标系一堆点两两对称于某一重心,则排序后第1个和第n个为一对,以此类推. 枚举所有可能的重心点并check.因为隐藏的点不超过k个,所以点1-k+1都可能跟第n个匹配.对右侧同样适用, ...
- 湖南大学新生赛C,G,J题解
C: 思路:做几组数据就基本能发现规律,奇数为-1,偶数为1 代码: #include<cstdio> #include<iostream> #include<cstri ...
- Hive_Hive的数据模型_外部表
Hive的数据模型之外部表 外部表(External Table)- 指向已经在HDFS中存在的数据,可以创建Partition- 它和内部表在元数据的组织上是相同的,而实际数据的存储则有较大的差异. ...
- guacamole的复制粘贴
一.发送中文或文本(针对开发环境,生产环境不需变动) 官方下载的完整版js缺失了一部分关于粘贴板的代码,调用setclipboard方法,将外部内容复制到粘贴板的时候,提示方法不存在.需要补齐这部分源 ...
- C. An impassioned circulation of affection DP
http://codeforces.com/contest/814/problem/C 12ooyomioomioo21 o2 o 这题我是用dp解的,不过好像很慢,比赛的时候算了下不会mle,就没滚 ...
- Mybatis 查询一个对象包含多个子对象 (List 包含 List)
功能:查询一个数据列表 且每个数据中包含各自的子数据集合 使用场景:1. 当需要查询多订单数据且同时订单数据中需要包含订单明细数据时 2. 当需要查询多评论数据且同时评论数据中需要包含评论回复数据时 ...
- 将JWT与Spring Security OAuth结合使用
1.概述 在本教程中,我们将讨论如何使用Spring Security OAuth2实现来使用JSON Web令牌. 我们还将继续构建此OAuth系列的上一篇文章. 2. Maven配置 首先,我们需 ...