vue-cli3.0 flexible&px2rem 解决第三方ui组件库样式问题
背景
在项目使用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。
解决方案二:
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"
}
}
},

本篇文字就到这里了,动手试试~
vue-cli3.0 flexible&px2rem 解决第三方ui组件库样式问题的更多相关文章
- Angular第三方UI组件库------ionic
一.Angular UI组件库 ------------ionic 1. 官网:https://ionicframework.com 文档:https://ionicframework.com/d ...
- 属性.native用于解决第三方el组件库@click事件无效
描述 有时发现用一些第三方的组件库时,例如一个封装好的button按钮<el-butten>,绑定点击事件却没有任何作用,这时便需要加 .native 原因: v-on 是对 Vue 的事 ...
- vux 是基于 WeUI 和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。
https://doc.vux.li/zh-CN/ https://vux.li/
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
- 强烈推荐优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- 【转】优秀的Vue UI组件库
原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...
- [转载]前端——实用UI组件库
https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...
- ui组件库
基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...
- vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...
随机推荐
- mysql的学习笔记(一)
前言 开发中经常用mysql和SQL server交替使用,自己都产生知识的混乱.在这里重新整理下mysql的知识,也是梳理自己知识点,因为是学习笔记,所以并不会使用到图形化管理工具.mysql的安装 ...
- [intellij IDEA]导入eclipse项目
1.因为最近eclipse在更新代码时经常卡死,就想将eclipse的项目迁移到idea.特意写下自己的经验,给迁移时遇到困难的朋友一些帮助 File -> new ->project f ...
- 【Android Studio安装部署系列】三十一、从Android studio3.0.0升级到Android studio3.0.1
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 突然想要升级到较高版本.要跟随潮流嘛,不然就落后了. 下载IDE http://www.wanandroid.com/tools/i ...
- [翻译] 介绍EF Core
Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...
- Nginx 简单记录
Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. ...
- DSAPI 远程协助之获取当前鼠标指针坐标及样式
在编写远程协助类软件时,除了获取屏幕画面外,还需要获取鼠标当前的坐标以及当前的指针样式,以便让远程屏幕知道当前的操作状态. 使用DSAPI内置的鼠标指针类,可轻松获取. 代码如下: Imports D ...
- 引用KBC.PetroSIM.Interop的dll,在代码中调用时出现 80040154 没有注册类 的错误
失败的尝试: regsvr32注册:模块已加载,但找不到入口点DllRegisterServer regasm注册:需写上regasm的完整路径,注册成功,但问题依旧 将项目的平台改为x86:问题依旧 ...
- [转]How to: Create a Report Server Database (Reporting Services Configuration)
本文转自:https://docs.microsoft.com/en-us/previous-versions/sql/sql-server-2008-r2/ms157300%28v%3dsql.10 ...
- 无需***,轻松提速 Github
无需***,轻松提速 Github 众所周知,Github 是全球程序员最喜欢访问的网站之一,但是在国内,会很容易出现一个水土不服的局面 -- 下载不了(稍微大一点中途就报错了),下载速度慢 .... ...
- c# 图片加水印
/// <summary> /// 图片水印 /// </summary> /// <param name="imgPath">服务器图片相对路 ...