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适配的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要给大家介绍了关于vuex使用方法的相关资料,主要内容包括Vuex的安装和配置,以及如何在.vue文件中引入和使用Vuex状态,作者还分享了一种在模块中存储状态的建议方法,并提供了具体的代码示例,需要的朋友可以参考下2024-10-10
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
vue3上线已经很久了,许多小伙伴应该都已经使用过vue3了,下面这篇文章主要给大家介绍了关于vue3更新的setup语法糖的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
今天小编就为大家分享一篇vue 实现input表单元素的disabled示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue3中实现文本显示省略号和tooltips提示框的方式详解
在 B 端业务中,我们经常会遇到文本内容超出容器区域需显示省略号的需求,当鼠标移入文本时,会出现 Tooltip 显示完整内容,最近,我也遇到了这样的场景,接下来给大家介绍vue3中实现文本显示省略号和tooltips提示框的方式,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue子组件使用自定义事件向父组件传递数据的方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了vue中子组件调用兄弟组件方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了Vue中如何使用mock模拟数据，具有很好的价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue之请求如何传递参数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue微信分享链接添加动态参数的实现方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
最新评论