vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配
更新時間：2023年08月28日 11:41:10 作者：Grade_002
這篇文章主要為大家介紹了vue自定義loader將行內(nèi)樣式px轉(zhuǎn)rem適配示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
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適配的詳細內(nèi)容，更多關(guān)于vue loader行內(nèi)樣式px轉(zhuǎn)rem適配的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文描述了一個Vue3和Vite項目中實現(xiàn)版本更新檢查的解決方案,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
element?table?表格控件實現(xiàn)單選功能
本文主要介紹了element?table?表格控件實現(xiàn)單選功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
今天小編就為大家分享一篇Vue 第三方字體圖標引入 Font Awesome的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue openLayers實現(xiàn)圖層數(shù)據(jù)切換與加載流程詳解
OpenLayers是一個用于開發(fā)WebGIS客戶端的JavaScript包，最初基于BSD許可發(fā)行。OpenLayers是一個開源的項目，其設(shè)計之意是為互聯(lián)網(wǎng)客戶端提供強大的地圖展示功能，包括地圖數(shù)據(jù)顯示與相關(guān)操作，并具有靈活的擴展機制2022-09-09
今天小編就為大家分享一篇對vue中methods互相調(diào)用的方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)自定義全局右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue 中使用虛擬 dom 且根據(jù) diff 算法進行新舊 DOM 對比，從而更新真實 dom ，key 是虛擬 DOM 對象的唯一標識, 在 diff 算法中 key 起著極其重要的作用，本文講解 key 的作用以及為什么最好不要使用 index 作為 key 的屬性值2021-11-11
這篇文章主要介紹了vue兩次賦值頁面獲取不到的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue2.0 與 bootstrap datetimepicker的結(jié)合使用實例
本篇文章主要介紹了vue2.0 與 bootstrap datetimepicker的結(jié)合使用實例，非常具有實用價值，需要的朋友可以參考下2017-05-05
Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link)
這篇文章主要介紹了Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11