postcss插件px自动转化rem

// 引入 postcss 和 postcss-pxtorem 插件
const postcss = require('postcss');
const pxtorem = require('postcss-pxtorem');

module.exports = {
  plugins: [
    pxtorem({
      // 需要转换的根字体大小，默认为16px
      rootValue: 16,
      // 允许转换的最小像素值，低于该值的 px 不会转换
      minPixelValue: 3,
      // 忽略某些选择器或属性中的 px 转换
      propWhiteList: [],
      // 或者使用 propBlackList 来忽略某些属性
      propBlackList: [],
      // 替换 rem 的单位，默认是 true
      replace: true,
      // 媒体查询中的 px 是否也进行转换
      mediaQuery: false,
      // 是否在转换时保留原来的 px 单位
      exclude: /node_modules/i, // 排除 node_modules 文件夹中的文件
    })
  ]
};

// 解释说明：
// 1. `rootValue` 是设置根元素的字体大小，默认为16px。
// 2. `minPixelValue` 设置了最小的 px 值，低于这个值的 px 不会被转换为 rem。
// 3. `propWhiteList` 和 `propBlackList` 可以用来控制哪些 CSS 属性需要或不需要转换。
// 4. `replace` 控制是否替换原来的 px 单位。
// 5. `mediaQuery` 决定媒体查询中的 px 是否也需要转换。
// 6. `exclude` 用于排除某些文件或文件夹中的 px 转换，比如这里的正则表达式排除了 node_modules 中的文件。