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样式，直接忽略掉，简单直接实用。