vue自定义loader将行内样式px转rem适配
更新时间：2023年08月28日 11:41:10 作者：Grade_002
这篇文章主要为大家介绍了vue自定义loader将行内样式px转rem适配示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
1.创建文件loader/style-px2rem-loader.js
匹配所有行内样式
module.exports = function(content, map, meta) {
// let reg = /(\d+(\\.\d+)?)px/g
let reg = /(?<num1>\d+)\.?(?<num2>\d+)?px/g // 匹配所有px 相关的字符
let content1 = content.replace(reg,function(...data){ // px 转换为带小数的rem
var arr = data[data.length-1]
var num1=0, num2=0;
if(arr.num1)num1=parseFloat(arr.num1)
if(arr.num2)num2=parseFloat(arr.num2)
return parseFloat(num1+'.'+num2)/16 + 'rem' // 这里以16px 为pc端转换基数 适配1920分辨率
})
return content1
};2.vue.config.js中配置使用自定义 loader
config.module
.rule('pug')
.test(/\.pug$/)
.use('style-px2rem-loader')
.loader('style-px2rem-loader')
.end()3.将所有需要转换的组件增加 lang="pug" 属性
重新编译 查看效果 所有行内样式px 转换为了 rem 如下：
<template lang="pug"> // 添加属性 lang="pug" <div style="width:400px;height:400px;margin-top:10px;></div> </template>
以上就是vue自定义loader将行内样式px转rem适配的详细内容，更多关于vue loader行内样式px转rem适配的资料请关注脚本之家其它相关文章！
相关文章
本文描述了一个Vue3和Vite项目中实现版本更新检查的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
本文主要介绍了element table 表格控件实现单选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
今天小编就为大家分享一篇Vue 第三方字体图标引入 Font Awesome的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制2022-09-09
今天小编就为大家分享一篇对vue中methods互相调用的方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了vue实现自定义全局右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue 中使用虚拟 dom 且根据 diff 算法进行新旧 DOM 对比，从而更新真实 dom ，key 是虚拟 DOM 对象的唯一标识, 在 diff 算法中 key 起着极其重要的作用，本文讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值2021-11-11
这篇文章主要介绍了vue两次赋值页面获取不到的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue2.0 与 bootstrap datetimepicker的结合使用实例
本篇文章主要介绍了vue2.0 与 bootstrap datetimepicker的结合使用实例，非常具有实用价值，需要的朋友可以参考下2017-05-05
这篇文章主要介绍了Nuxt.js的路由跳转操作(页面跳转nuxt-link)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论