Vue 结合webpack使用px2rem-loader

2019-2-21 21:48:44 254 views

安装

Vue-cli使用的2.x

npm install px2rem-loader  
或者 yarn add px2rem-loader

webpack配置

在项目的/build/utils中配置

 const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5,
remPrecision: 2
}
}
并在 generateLoaders 中添加 px2remLoader

配置如下:

最终utils配置文件如下, remUnit 指的是设计稿/10 ,比如iphone6的375/10,即1rem=37.5px;

设置好后重新运行即可。

建议结合 lib-flexible

npm i lib-flexible    
或者yarn add lib-flexible
然后在main.js中引入lib-flexible
import 'lib-flexible/flexible'

关于retina屏幕1px像素问题

例如设置border-bottom:1px solid #ddd;这里不希望他转变成rem

可以如下  border-bottom:1px solid #ddd; /*no*/
0

No Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。