Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 554|回复: 0

vue-cli3.0 flexible&px2rem 解决第三方ui组件库样式问题

[复制链接]
  • TA的每日心情
    奋斗
    2024-6-6 10:50
  • 签到天数: 750 天

    [LV.10]以坛为家III

    2034

    主题

    2092

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    706216
    发表于 2021-4-29 14:34:40 | 显示全部楼层 |阅读模式

    背景

    在项目使用lib-flexible还有postcss-px2rem实现移动端适配,当我们引入第三方的样式组件库,发现一个问题。那些组件库的样式都变小了。

     

    问题原因

    变小的主要原因是第三库 css一依据 data-dpr="1" 时写的尺寸

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    这时我们使用的flexible引入时 data-dpr不是一个写死了的,是一个动态的;就导致这个问题

     

    解决方式

    postcss.config.js中过滤node_modules

     

    具体实现步骤:

     

    第一部分:项目中引入lib-flexible

     

    一、项目中安装lib-flexible

    npm install lib-flexible --save

     

    二、在项目的入口main.js文件中引入lib-flexible

    import 'lib-flexible'

     

    第二部分:使用postcss-px2rem自动将css中的px转换成rem

     

    一、安装postcss-px2rem 

    npm install postcss-px2rem --save-dev

     

    二、项目配置postcss

    项目开始在vue.config.js(项目创建完初始是没有这个js文件的,需要自己手动创建)中配置的,上代码

    复制代码
    module.exports = {
        css: {
            loaderOptions: {
              postcss: {
                // 这是rem适配的配置  注意: remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是750px的,用75就刚刚好。
                 plugins: [
                  require("postcss-px2rem")({
                    remUnit: 75
              })
            ]
          }
        }
    }
    复制代码

    初始的适配方案就完成了,然后可以直接在css或.vue文件中写已px为单位的样式了,到浏览器会自动转为rem。

    but but 引入vant的组件库后,问题来了。

    试着放了一个简单的cell组件,npm run serve项目跑起来,组件中的样式都变小了,F12看了一下果然组件的样式也都被转换成了rem。

     

    解决方案一:

    将第三方组件的css文件复制出来第三方库的css代码px统一扩大2倍,或者用全局替换将px替换为px/*no*/。这个方案不太好,具体操作可以参考以下两篇文章:https://segmentfault.com/a/1190000014575890 和 https://blog.csdn.net/weixin_42464312/article/details/82769805。

     

    解决方案二:

    使用postcss-px2rem-exclude
     
    首先,需要卸载项目中的postcss-px2rem。
    npm  uninstall postcss-px2rem --save-dev

    其次,安装postcss-px2rem-exclude

    npm  install postcss-px2rem-exclude --save

     

    后是配置exclude选项,需要注意的是这个配置在vue.config.js中式不起作用的,如图。

     

    正确的配置位置是项目根目录下的postcss.config.js文件,如果你的项目没有生成这个独立文件,就需要在你的package.js里设置。

    复制代码
    postcss.config.js
    
    module.exports = {
      plugins: {
        autoprefixer: {},
        "postcss-px2rem-exclude": {
          remUnit: 75,
          exclude: /node_modules|folder_name/i
        }
      }
    };
    复制代码
    复制代码
    package.json
    
    "postcss": {
        "plugins": {
          "autoprefixer": {},
          "postcss-px2rem-exclude":{
              "remUnit": 75,
              "exclude":"/node_modules|floder_name/i"
          }
        }
      },
    复制代码

    本篇文字就到这里了,动手试试~

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-6-18 23:50 , Processed in 0.061892 second(s), 30 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表