px2rem 第三方庫實踐

迷途小學生發表於2019-01-03
REM

  Vue 專案搭配lib-flexible 和 px2rem 來實現移動端專案的適配應該是很多公司目前採用的一種移動端適配解決方案。這種方法的常規webpack配置百度上有很多文章都有教程，大家可以按照那些教程一步一步配置。我在這裡就不多說了，如果大家實在懶得找可以檢視這篇文章：傳送門。

但是採用px2rem外掛有兩個需要注意的地方：

1. 對於專案內的行內樣式它是無法將px單位自動轉化為rem的。

請看下面的例子:

<mu-form-item label="密碼" class='item' style='margin-top: 36px;'>
    <mu-text-field type="password" v-model="form.psd"></mu-text-field>
</mu-form-item>複製程式碼

專案編譯之後margin-top:36px是不會自動轉化為rem表示的。

2. 如果專案使用了第三方庫，那麼第三庫的樣式將會受影響。

關於這個問題我自己百度查閱了一些資料，但是感覺沒有找到特別仔細的教程，因此我自己個人總結了一下，希望能幫到大家。目前關於這個問題大概有三種解決方案：

  1. 將第三方庫的CSS檔案拷貝出來，然後將拷貝出來的檔案裡面的px全部替換為大寫的PX。然後引用修改後的檔案。
  2. 同樣將第三方庫的CSS檔案拷貝出來，然後手動將拷貝出來檔案裡面以px為單位的數值全部*2.然後引用修改後的檔案。詳細的可以檢視這篇文章：傳送門。
  3. 個人感覺是目前比較好的一個解決方案。通過postcss-px2rem-exclude外掛，exclude掉node_modules裡面的檔案。具體的步驟大家可以跟著下面的內容：
如果專案之前有用px2rem,大家可以先解除安裝掉px2rem外掛和刪掉對應的配置程式碼
npm  uninstall postcss-px2rem --save-dev複製程式碼
安裝postcss-px2rem-exclude
npm  install postcss-px2rem-exclude --save複製程式碼
配置postcss-px2rem-exclude

如果大家是用vue-cli手腳架的話，請找到'../build/vue-loader.conf.js'。然後將裡面的配置修改成如下：

px2rem 第三方庫實踐

exclude裡面大家可以將檔案目錄自行修改為需要的檔案目錄。

重啟專案，完成收工

以上就是個人的一些見解，如果有不對的地方歡迎指正。希望這篇文章能幫到大家，謝謝~~




相關文章