vue移動端 px2rem-loader與vux移動端組件庫樣式錯亂，應該使用postcss-plugin-px2rem完美解決

整了半天，仍是不能用px2rem-loader這個組件，由於他沒有忽略範圍，要換postcss-plugin-px2rem

一、先npm 安裝postcss-plugin-px2rem插件

npm i postcss-plugin-px2rem  --save -dev

二、找到與src同級目錄下的.postcssrc.js

module.exports = {
  "plugins": {
 "postcss-import": {},
 "postcss-url": {},
 // to edit target browsers: use "browserslist" field in package.json
 "autoprefixer": {}
  }
}

而後從新npm run dev，打開控制檯能夠看到代碼中的px已經被轉成了rem

注意：

    1.此方法只能將.vue文件style標籤中的px轉成rem，不能將script標籤和元素style裏面定義的px轉成rem

    2.若是在.vue文件style中的某一行代碼不但願被轉成rem，只要在後面寫上註釋 / no/就能夠了

 

問題：爲何要 忽略node_modules目錄下的文件？

答：有時候咱們在手機端項目的時候須要導入第三方UI庫，例如：VUX,MINT等，這時你就會發現第三方的組件樣式都變小了，變小的主要緣由是第三庫 css一依據 data-dpr="1" 時寫死的尺寸，咱們使用的flexible引入時 data-dpr不是一個寫死了的，是一個動態的，就致使這個問題。

這裏就再也不修改第三方的UI樣式，直接忽略掉，簡單直接實用。