vue打包的时候自动将px转成rem的操作方法
时间:2019-04-20
本文章向大家介绍vue打包的时候自动将px转成rem的操作方法,主要包括vue打包的时候自动将px转成rem的操作方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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]
具体如下
然后重启项目
注意
因为网页识别的精度有限,如果是1px转成rem之后,会出现不识别的状态,主要是在边框的时候;
这时候可以在css语句后面加上/* no */ 表示此行语句不转换;如
.tabs div{ width: 218px; height: 70px; line-height: 72px; text-align: center; border: 1px solid #dcdcdc;/* no */ }
总结
以上所述是小编给大家介绍的vue打包的时候自动将px转成rem的操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 使用Identity Server 4建立Authorization Server (1)
- Java之异常处理
- 挖洞经验 | 看我如何利用SAML漏洞实现Uber内部聊天系统未授权登录
- 使用ichartjs生成图表
- 使用angular4和asp.net core 2 web api做个练习项目(四)
- list.add(),向List集合插入对象报空指针异常
- 使用angular4和asp.net core 2 web api做个练习项目(三)
- 即学即用系列一:纯函数
- Java之StringBuffer,StringBuilder,Math,Date,SimpleDateFormat,UUID,File
- React编程思想
- 前台分页,以及类别选择
- 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular
- 数据库 105道题目整理与吐血总结
- 使用angular4和asp.net core 2 web api做个练习项目(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法