快捷導(dǎo)航

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)文章

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