px2rem-loader 需要與 flexible 配合使用，不然px2rem僅僅只是轉成rem卻不會設置rem的信息

安裝 flexible

npm i lib-flexible -S

然后在main.js中引入

import 'lib-flexible/flexible'

直接引入的文件需要有優先與引用的組件

安裝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之后，會出現不識別的狀態，主要是在邊框的時候；

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

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

總結

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com