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

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

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

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

找到generateLoaders修改一下代碼

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

具體如下

然后重啟項目

注意

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

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue簡單練習(xí) 桌面時鐘的實現(xiàn)代碼實例
這篇文章主要介紹了vue簡單練習(xí) 桌面時鐘的實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值的相關(guān)資料,需要的朋友可以參考下
2019-09-09
Vue2.0仿餓了么webapp單頁面應(yīng)用詳細步驟
本篇文章給大家分享了Vue2.0仿餓了么webapp單頁面應(yīng)用詳細步驟，有興趣的朋友可以跟著操作下。
2018-07-07
vue 實現(xiàn)剪裁圖片并上傳服務(wù)器功能
這篇文章主要介紹了vue 實現(xiàn)剪裁圖片并上傳服務(wù)器功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2018-03-03
利用Vue實現(xiàn)一個markdown編輯器實例代碼
這篇文章主要給大家介紹了關(guān)于如何利用Vue實現(xiàn)一個markdown編輯器的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue3+element-plus props中的變量使用 v-model 報錯及解決方案
這篇文章主要介紹了vue3+element-plus props中的變量使用 v-model 報錯及解決方案,prop 是單向數(shù)據(jù)流,這里只能用:model-value,不能用v-model,本文給大家介紹的非常詳細,需要的朋友可以參考下
2023-10-10
vue項目的html如何引進public里面的js文件
這篇文章主要介紹了vue項目的html如何引進public里面的js文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue項目首屏打開速度慢的解決方法
這篇文章主要介紹了vue項目首屏打開速度慢的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue項目創(chuàng)建首頁發(fā)送axios請求的方法實例
這篇文章主要給大家介紹了關(guān)于Vue項目創(chuàng)建首頁發(fā)送axios請求的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2023-02-02
基于vue2.0實現(xiàn)的級聯(lián)選擇器
這篇文章主要介紹了基于vue2.0實現(xiàn)的級聯(lián)選擇器，基于Vue的級聯(lián)選擇器，可以單項，二級，三級級聯(lián)，多級級聯(lián)，有興趣可以了解一下
2017-06-06