溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關vue打包的時候如何自動將px轉成rem，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
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”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
