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 fullscreen全屏实现代码
Apr 09 Javascript
firefo xml 读写实现js代码
Jun 11 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
JS数组的常用10种方法详解
May 08 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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源代码数组统计count分析
2011/08/02 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
js 调整select 位置的函数
2008/02/21 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
Python读写Excel文件的实例
2013/11/01 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Python restful框架接口开发实现
2020/04/13 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
户籍证明的格式
2014/01/13 职场文书
团员自我评价范文
2015/03/10 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
小平您好观后感
2015/06/09 职场文书
PHP使用QR Code生成二维码实例
2021/07/07 PHP
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技