vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法

更新時(shí)間：2018年06月20日 09:31:27 作者：劉小蘇蘇

這篇文章主要介紹了vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法,需要的朋友可以參考下

px2rem-loader 需要與 flexible 配合使用，不然px2rem僅僅只是轉(zhuǎn)成rem卻不會(huì)設(shè)置rem的信息

安裝 flexible

npm i lib-flexible -S

然后在main.js中引入

import 'lib-flexible/flexible'

直接引入的文件需要有優(yōu)先與引用的組件

安裝px2rem-loader

npm i px2rem-loader -D

在build的utils.js中找到cssLoader添加一下代碼

const px2remLoader = {
  loader: 'px2rem-loader',
  option: {
   remUnit: 75 // 設(shè)計(jì)圖寬度÷10
  }
 }

找到generateLoaders修改一下代碼

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]

具體如下

然后重啟項(xiàng)目

注意

因?yàn)榫W(wǎng)頁(yè)識(shí)別的精度有限，如果是1px轉(zhuǎn)成rem之后，會(huì)出現(xiàn)不識(shí)別的狀態(tài)，主要是在邊框的時(shí)候；

這時(shí)候可以在css語(yǔ)句后面加上/* no */ 表示此行語(yǔ)句不轉(zhuǎn)換；如

.tabs div{
    width: 218px;
    height: 70px;
    line-height: 72px;
    text-align: center;
    border: 1px solid #dcdcdc;/* no */
  }

總結(jié)

以上所述是小編給大家介紹的vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue組件間的通信pubsub-js實(shí)現(xiàn)步驟解析
這篇文章主要介紹了Vue組件間的通信pubsub-js實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-03-03
Vue動(dòng)態(tài)改變css樣式的3種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)改變css樣式的3種方法,在Vue.js中我們經(jīng)常需要根據(jù)特定的條件或事件來(lái)動(dòng)態(tài)地修改CSS樣式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
Vue獲取表單數(shù)據(jù)的多種方式
這篇文章主要給大家介紹了關(guān)于Vue獲取表單數(shù)據(jù)的多種方式,在Vue中我們通常使用v-model命令綁定表單的屬性值(通常是value),獲取到的屬性值就是表單數(shù)據(jù),需要的朋友可以參考下
2023-09-09
vue?指令與過(guò)濾器案例代碼
這篇文章主要介紹了vue?指令與過(guò)濾器，本文通過(guò)案例代碼給大家詳細(xì)講解，給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-11-11
Vue3中v-model語(yǔ)法糖的三種寫(xiě)法詳解
這篇文章主要為大家詳細(xì)介紹了Vue3中v-model語(yǔ)法糖的三種寫(xiě)法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01
vue修改Element的el-table樣式的4種方法
這篇文章主要介紹了vue修改Element的el-table樣式的4種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-09-09
vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解
今天小編就為大家分享一篇vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue-router 按需加載 component: () => import() 報(bào)錯(cuò)的解決
這篇文章主要介紹了vue-router 按需加載 component: () => import() 報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
詳解如何在Vue組件方法中加載和使用匿名函數(shù)
在Vue.js的開(kāi)發(fā)過(guò)程中,組件方法的定義和調(diào)用是非常常見(jiàn)的,有時(shí)候,為了響應(yīng)事件或其他操作,我們需要在組件的方法中使用匿名函數(shù),本文將深入探討如何在Vue組件的方法中加載和使用匿名函數(shù),并提供詳細(xì)的代碼示例和解釋,幫助開(kāi)發(fā)者更好地理解和應(yīng)用這些技術(shù)
2024-09-09
關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問(wèn)題
這篇文章主要介紹了關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04