vue打包的時候自動將px轉成rem的操作方法

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

這篇文章主要介紹了vue打包的時候自動將px轉成rem的操作方法,需要的朋友可以參考下

px2rem-loader 需要與 flexible 配合使用，不然px2rem僅僅只是轉成rem卻不會設置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 // 設計圖寬度÷10
  }
 }

找到generateLoaders修改一下代碼

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

具體如下

然后重啟項目

注意

因為網頁識別的精度有限，如果是1px轉成rem之后，會出現不識別的狀態(tài)，主要是在邊框的時候；

這時候可以在css語句后面加上/* no */ 表示此行語句不轉換；如

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

總結

以上所述是小編給大家介紹的vue打包的時候自動將px轉成rem的操作方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

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