基于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，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

基于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. 重启项目

这篇关于基于vue/cli 4.5.11 + vant3.0 搭建移动端项目 使用 postcss-pxtorem+amfe-flexible 实现将px转换成rem的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---