vue移动端 px2rem-loader与vux移动端组件库样式错乱，应该使用postcss-plugin-px2rem完美解决

整了半天，还是不能用px2rem-loader这个组件，因为他没有忽略范围，要换postcss-plugin-px2rem

1、先npm 安装postcss-plugin-px2rem插件

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

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