Vue自动px单位自动转换rem

上期说到使用 lib-flexible + postcss-px2rem-exclude 实现px 转 rem，但是发现实现的结果是错误的，宽度根本不够，查看各种资料了解到，现在已经不使用了，现在使用的是amfe-flexible + px2rem-loader + postcss-px2rem-exclude

一、安装

1.安装px2rem-loader amfe-flexible postcss-px2rem-exclude

npm install px2rem-loader amfe-flexible  postcss-px2rem-exclude --save

2.main.js文件中引入amfe-flexible/index.js

import 'amfe-flexible/index.js'

3.进入.postcssrc.js文件配置

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-px2rem-exclude": {
      remUnit: 192, // 基准数据
      exclude: /node_modules|mobile/i
    }
  }
}

参数说明：
remUnit：是基准数据，举例：若设计稿的宽为1920，则该数值为192

exclude：不对px进行转化的目录，举例：/node_modules|mobile/i 是node_modules下的文件和mobile目录下的文件css不进行转化；

最后

重新npm run dev，每次修改以后也要重新编译，并且要重新打开新页面。

注意

1.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem；

2.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了。