vue自定义loader将行内样式px转rem适配
作者：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适配的资料请关注脚本之家其它相关文章！