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
深入解析contentWindow, contentDocument
Jul 04 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
让JavaScript代码更加精简的方法技巧
Jun 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php 前一天或后一天的日期
2008/06/28 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
jQuery bind事件使用详解
2011/05/05 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
Python读大数据txt
2016/03/28 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
python实现图片转字符画
2021/02/19 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
经典c++面试题四
2015/05/14 面试题
文员个人的求职信范文
2013/09/26 职场文书
急诊科护士自我鉴定
2013/10/14 职场文书
先进集体获奖感言
2014/02/13 职场文书
项目总经理岗位职责
2014/02/14 职场文书
婚前协议书怎么写
2014/04/15 职场文书
学习之星事迹材料
2014/05/17 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers