vue 自動px單位自動轉換rem

vue 適配移動端 假設設計圖是375

第一步 安裝 lib-flexible

npm i lib-flexible --save

第二步 安裝 px2rem-loader

　　npm install px2rem-loader --save-dev

第三步 引入lib-flexible

　　import 'lib-flexible/flexible'

 

第四步 最重要的一步 配置utils文件

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5
    }
  }
//在generateLoaders方法中添加px2remLoader

const loaders = [cssLoader,px2remLoader]

ps:npm的安裝命令--save是將包裝到package.json的dependencies     而--save-dev是將包裝到package.json的devDependencies中

第一個相當於是安裝插件 第二個是安裝依賴包

 

注意！！：如果是750的設計圖需要將第四步的remUnit替換成750 這樣生成出來的比例就是1rem=100px

最后測試下。。

測試沒問題