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