关于vant的rem适配的PostCSS 配置

最新推荐文章于 2024-06-18 17:04:11 发布

划船不用桨--

最新推荐文章于 2024-06-18 17:04:11 发布

阅读量674

点赞数 1

分类专栏：工具文章标签： css node.js html

本文链接：https://blog.csdn.net/weixin_43663349/article/details/120731711

版权

本文详细介绍了在vant项目中使用PostCSS进行Rem布局适配的配置过程，包括遇到的问题、解决方法以及PostCSS的基本概念和作用。通过安装依赖、调整postcss-pxtorem版本，实现了px到rem的转换，但行内样式不受影响。同时，文章还提到了PostCSS的其他用途，如Autoprefixer和PostCSS Preset Env插件，以及PostCSS在Vue CLI中的集成。

摘要由CSDN通过智能技术生成

在vant文档里有写Rem布局适配，写不够详细，摸索了一番写下该文章

PostCSS 配置

安装依赖

npm i postcss-pxtorem --save-dev
//或者（-D 是--save-dev的简写）
npm i postcss-pxtorem -D

在项目根目录中创建postcss.config.js文件

// postcss.config.js
module.exports = {
  //plugins用来配置要使用的相关插件
  plugins: {
    //把px转为rem插件
    'postcss-pxtorem': {
    //转换的根元素的基准值，正常情况按照你的设计稿走
    //750宽的设计稿，750/10=75
    //375宽的设计稿，375/10=37.5
    //vant是基于375的逻辑像素写的，小了一半
      rootValue: 37.5,
      //需要转换的css属性，*就是所有属性
      propList: ['*'],
    },
  },
};