1. 安裝 lib-flexible :

npm install lib-flexible --save-dev 復制代碼

2. 安裝px2rem-loader ：

npm install px2rem-loader --save-dev 復制代碼

3. 引入 lib-flexible （在項目入口文件 main.js 里 引入 lib-flexible）:

import 'lib-flexible' 復制代碼

4. 配置px2rem-loader：

// vue-cli生成的webpack配置中，vue-loader的options和其它文件loader最終都由 build/utils.js 里的一個方法生成的。// 4.1 cssLoader 后再加上一個 px2remLoader 即可const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 108 // 意思是1rem=多少像素 ，這個參數值通過psd設計稿寬度/10來計算的（1080）}// 4.2 放進loaders 數組中function generateLoaders (loader, loaderOptions){const loaders = [cssLoader, px2remLoader]}// 4.3 修改配置后需要重新啟動，然后我們在組件中直接寫單位px，設計稿量多少就寫多少，它會自動轉出rem。復制代碼

5. css單位直接使用px，會自動轉為rem

總結

以上是生活随笔為你收集整理的vue-cli + lib-flexible + px2rem实现px自动转化为rem的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。