基于vue/cli 4.5.11 + vant3.0 搭建移动端项目 使用 postcss-pxtorem+amfe-flexible 实现将px转换成rem

基于vue/cli 4.5.11 + vant3.0 搭建移动端项目 使用 postcss-pxtorem+amfe-flexible 实现将px转换成rem

1. 已初始化vue/cli

2. 安装postcss-pxtorem amfe-flexible

   npm install postcss-pxtorem  -D
   

   npm install amfe-flexible   -S
   

3. 在 main.js 里引入 amfe-flexible

   import 'amfe-flexible/index';
   

4. 在vue.config.js中添加

   css: {
       loaderOptions: {
           postcss: {
               plugins: [
                   require('postcss-pxtorem')({
                       rootValue: 37.5, // 换算的基数(设计图375的根字体为37.5)
                       propList: ['*']
                   })
               ]
           }
       }
   },
   

5. 重启项目