vue-cli + lib-flexible + px2rem实现px自动转化为rem
生活随笔
收集整理的這篇文章主要介紹了
vue-cli + lib-flexible + px2rem实现px自动转化为rem
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: [BZOJ 4819] [SDOI 20
- 下一篇: XMLHttpRequest