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