1. 安裝 lib-flexible :

npm install lib-flexible --save-dev 復(fù)制代碼

2. 安裝px2rem-loader ：

npm install px2rem-loader --save-dev 復(fù)制代碼

3. 引入 lib-flexible （在項(xiàng)目入口文件 main.js 里 引入 lib-flexible）:

import 'lib-flexible' 復(fù)制代碼

4. 配置px2rem-loader：

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

5. css單位直接使用px，會(huì)自動(dòng)轉(zhuǎn)為rem

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。