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

更新时间：2018年06月20日 09:31:27 作者：刘小苏苏

这篇文章主要介绍了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的操作方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

Vue router安装及使用方法解析
这篇文章主要介绍了Vue router安装及使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-12-12
vue中的主动触发点击事件
这篇文章主要介绍了vue中的主动触发点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
详解关于element级联选择器数据回显问题
这篇文章主要介绍了详解关于element级联选择器数据回显问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
Vue-cli中为单独页面设置背景色的实现方法
下面小编就为大家分享一篇Vue-cli中为单独页面设置背景色的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
在Vue项目中引入JQuery-ui插件的讲解
今天小编就为大家分享一篇关于在Vue项目中引入JQuery-ui插件的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
Vue3使用富文本框(wangeditor)的方法总结
项目中用到了富文本,选来选去选择了wangeditor,下面这篇文章主要给大家介绍了关于Vue3使用富文本框(wangeditor)的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-01-01
vue perfect-scrollbar(特定框架里使用非该框架定制库/插件)
这篇文章主要为大家介绍了vue perfect-scrollbar在特定框架里使用一款并非为该框架定制的库/插件如何实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
2023-05-05
多个Vue项目部署到服务器的步骤记录
这篇文章主要给大家介绍了关于多个Vue项目部署到服务器的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
vue返回上一页面时不刷新问题及解决方案
这篇文章主要介绍了vue返回上一页面时不刷新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
使用vue初用antd 用v-model来双向绑定Form表单问题
这篇文章主要介绍了使用vue初用antd 用v-model来双向绑定Form表单问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04