vue打包的时候自动将px转成rem的操作方法


Posted in Javascript onJune 20, 2018

px2rem-loader 需要与 flexible 配合使用,不然px2rem仅仅只是转成rem却不会设置rem的信息

安装 flexible

npm i lib-flexible -S

然后在main.js中引入

import 'lib-flexible/flexible'

直接引入的文件需要有优先与引用的组件

安装px2rem-loader

npm i px2rem-loader -D

在build的utils.js中找到cssLoader添加一下代码

const px2remLoader = {
  loader: 'px2rem-loader',
  option: {
   remUnit: 75 // 设计图宽度÷10
  }
 }

找到generateLoaders修改一下代码

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]

具体如下

vue打包的时候自动将px转成rem的操作方法

然后重启项目

注意

因为网页识别的精度有限,如果是1px转成rem之后,会出现不识别的状态,主要是在边框的时候;

这时候可以在css语句后面加上/* no */ 表示此行语句不转换;如

.tabs div{
    width: 218px;
    height: 70px;
    line-height: 72px;
    text-align: center;
    border: 1px solid #dcdcdc;/* no */
  }

总结

以上所述是小编给大家介绍的vue打包的时候自动将px转成rem的操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 自动转到命名锚记
Jan 10 Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
最短的IE判断代码
Mar 13 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 #Javascript
JS中call和apply函数用法实例分析
Jun 20 #Javascript
微信小程序模拟cookie的实现
Jun 20 #Javascript
JS伪继承prototype实现方法示例
Jun 20 #Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 #Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 #Javascript
You might like
php 获取客户端的真实ip
2009/11/30 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
javascript 闭包详解
2015/02/15 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python制作Windows系统服务
2017/03/25 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
python实现udp传输图片功能
2020/03/20 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Python异常处理机制结构实例解析
2020/07/23 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
专业销售业务员求职信
2013/11/18 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL