PostCSS的配置文件

Vue中使用Vant组件库时，需要使用rem单位，使用了以下两个工具：

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值

在使用PostCSS 时

提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

 项目中建立 postcss.config.js 文件，复制以上内容后，运行项目生效，但是发现有警告。

因为：

利用vue-cli搭建的项目，通过项目中的 .browserslistrc文件来配置要兼容的环境信息。

.browserslistrc文件  指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

.browserslistrc  默认有以下内容：

> 1%
last 2 versions
not dead

#兼容到超过百分之一的用户使用的浏览器
> 1%
#兼容到最后的两个版本
last 2 versions
not dead

而postcss 提供的配置：

module.exports = {
  //配置要使用的相关插件
  plugins: {
    //自动添加浏览器厂商声明前缀，用来兼容不同的浏览器
    //VUECLI 已经在内部默认配置了autoprefixer
    autoprefixer: {
      //browsers用来配置要兼容到的系统（浏览器）环境
      //这个配置没有问题，但是写到这里会有控制台编译警告
      //因为VUECLI是通过项目中的 .browserslistrc文件来配置要兼容的环境信息
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

 

所以修改.browserslistrc 

Android >= 4.0
iOS >= 8

postcss.config.js 

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};