vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配
更新時(shí)間：2023年08月28日 11:41:10 作者：Grade_002
這篇文章主要為大家介紹了vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
1.創(chuàng)建文件loader/style-px2rem-loader.js
匹配所有行內(nèi)樣式
module.exports = function(content, map, meta) {
// let reg = /(\d+(\\.\d+)?)px/g
let reg = /(?<num1>\d+)\.?(?<num2>\d+)?px/g // 匹配所有px 相關(guān)的字符
let content1 = content.replace(reg,function(...data){ // px 轉(zhuǎn)換為帶小數(shù)的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端轉(zhuǎn)換基數(shù) 適配1920分辨率
})
return content1
};2.vue.config.js中配置使用自定義 loader
config.module
.rule('pug')
.test(/\.pug$/)
.use('style-px2rem-loader')
.loader('style-px2rem-loader')
.end()3.將所有需要轉(zhuǎn)換的組件增加 lang="pug" 屬性
重新編譯 查看效果 所有行內(nèi)樣式px 轉(zhuǎn)換為了 rem 如下：
<template lang="pug"> // 添加屬性 lang="pug" <div style="width:400px;height:400px;margin-top:10px;></div> </template>
以上就是vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配的詳細(xì)內(nèi)容，更多關(guān)于vue loader行內(nèi)樣式px轉(zhuǎn)rem適配的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vuex使用方法的相關(guān)資料,主要內(nèi)容包括Vuex的安裝和配置,以及如何在.vue文件中引入和使用Vuex狀態(tài),作者還分享了一種在模塊中存儲(chǔ)狀態(tài)的建議方法,并提供了具體的代碼示例,需要的朋友可以參考下2024-10-10
Vue開(kāi)發(fā)過(guò)程中遇到的疑惑知識(shí)點(diǎn)總結(jié)
vue是法語(yǔ)中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開(kāi)發(fā)過(guò)程中遇到的疑惑知識(shí)點(diǎn),有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
vue3上線已經(jīng)很久了,許多小伙伴應(yīng)該都已經(jīng)使用過(guò)vue3了,下面這篇文章主要給大家介紹了關(guān)于vue3更新的setup語(yǔ)法糖的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
vue 實(shí)現(xiàn)input表單元素的disabled示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)input表單元素的disabled示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue3中實(shí)現(xiàn)文本顯示省略號(hào)和tooltips提示框的方式詳解
在?B?端業(yè)務(wù)中,我們經(jīng)常會(huì)遇到文本內(nèi)容超出容器區(qū)域需顯示省略號(hào)的需求,當(dāng)鼠標(biāo)移入文本時(shí),會(huì)出現(xiàn)?Tooltip?顯示完整內(nèi)容,最近,我也遇到了這樣的場(chǎng)景,接下來(lái)給大家介紹vue3中實(shí)現(xiàn)文本顯示省略號(hào)和tooltips提示框的方式,需要的朋友可以參考下2024-04-04
vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)
這篇文章主要介紹了vue子組件使用自定義事件向父組件傳遞數(shù)據(jù)的方法，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了Vue中如何使用mock模擬數(shù)據(jù)，具有很好的價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue之請(qǐng)求如何傳遞參數(shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue實(shí)現(xiàn)微信分享鏈接添加動(dòng)態(tài)參數(shù)的方法
這篇文章主要介紹了vue微信分享鏈接添加動(dòng)態(tài)參數(shù)的實(shí)現(xiàn)方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04