使用postcss-pxtorem和lib-flexible來實現vue項目自動將px轉成rem

　　有時候我們為了前端頁面可以匹配不同分辨率的屏幕，會使用rem來對頁面進行布局，無論基礎px值設置得多么好計算，在寫rem數值的時候，都需要對設計圖原始的px值進行一番換算。

　　有沒有工具可以輔助我們自動進行計算，我只要寫px值就好了呢？當然是有的，編輯器其實就可以配置插件來對數值進行換算。但是有時候，我們在使用一些第三方ui庫時，也想要對他們的px值進行轉換，該怎么辦呢？

　　當當當當，來介紹一下兩個好朋友，postcss-pxtorem 和 lib-flexible ，安裝配置這兩個依賴，我們就可以實現我們想要的功能啦。

　　1. 首先，我們來安裝一下這兩個包

　　npm安裝方式：

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

 　　yarn安裝方式：

yarn add amfe-flexible
yarn add postcss-pxtorem --dev

 　

　　2. 在main.js中引入lib-flexible

import 'amfe-flexible'

 

 　　3. 配置postcss-pxtorem

• vue-cli2配置方式：

　　　　在.postcss.js文件中的plugins下新增postcss-pxtorem的配置

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 192, // 根據設計圖尺寸寫，設計圖是1920，就寫192
        propList: ['*'], // 需要被轉換的屬性
        selectorBlackList: [] // 不進行px轉換的選擇器
    }
  }
}

 

• vue-cli3配置方式：

　　　　在根路徑下新增postcss.config.js文件（如果有，就不新增）

　　　　配置的內容與上相同

 

 

　　完成上述步驟后，就可以愉快得使用設計圖里的px值進行代碼編寫了。如果設計圖的寬度是1920，則給rootValue設置192就行，lib-flexible會幫助我們計算好根字體。

　　postcss-pxtorem也可單獨使用，但是相應的我們得自己寫一個根字體的計算代碼，以及視圖窗口大小變化的監聽事件，比較起來，還是配合lib-flexible比較省時省力。

 

　　PS：如果部分設計樣式不想轉換為rem，可以將  px 改為  PX ，就不會對該數值進行轉換了，但是這一點在 calc 計算屬性中是 不生效的，開發模式下沒有問題，但是打包時會出現編譯錯誤（截至postcss-pxtorem 4.0.1版本哈，后續也許作者會修復這個問題），這個時候需要配合 selectorBlackList 來設置一個class來取消px的轉換。