vue-cli4关于px-＞rem插件配置

一，安装模块

npm install amfe-flexible postcss-px2rem -S
//cnpm install amfe-flexible postcss-px2rem -S

二，配置文件

1.在main.js下配置一下代码

import "amfe-flexible";

2.在项目根目录创建vue.config.js文件，并完成以下配置：

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    // 设计稿宽度的1/10，一般为75
                    require('postcss-px2rem')({remUnit: 75}),
                ]
            }
        }
    }
}

3.也可以在package.json，增加以下配置：

"postcss": {
  "plugins": {
    "autoprefixer": {},
    "postcss-px2rem": {
      "remUnit": 75
    }
  }
}

此文章仅个人记录学习所用