如何在一个项目里同时开发大屏版和移动版页面？px2vw踩坑实录！

问：为什么用 postcss-px-to-viewport-update 而不是 postcss-px-to-viewport ？
答：因为px2vw官方npm中的 include 配置不生效T______T

项目技术栈是react + umi + dva，所以在 .umirc.ts 中配置，其它能使用webpack的项目也差不多配置。

import { defineConfig } from 'umi';
import postCssPxToViewport from 'postcss-px-to-viewport-update';
// 为什么用postcss-px-to-viewport-update而不是postcss-px-to-viewport
// https://github.com/evrone/postcss-px-to-viewport/issues/53

export default defineConfig({
  extraPostCSSPlugins: [
    postCssPxToViewport({
      unitToConvert: 'px',
      viewportWidth: 1920, //视窗的宽度，对应我们设计稿的宽度，一般指retina（一个点两个像素），宽度1920（常见大屏页面设计稿）
      // viewportHeight: 1080, //视窗的高度，对应我们设计稿的高度，可以不配置
      unitPrecision: 5, //指定`px`转化成视窗单位值的小数位数（很多时候不能整除）
      viewportUnit: 'vw', //指定需要转换的视窗单位 建议'vw'
      fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位
      selectorBlackList: [],
      exclude: [], // 设置忽略文件，用正则做目录名匹配
      include: [/reportBigScreen/],
      replace: true, // 是否转换后直接更换属性值
      minPixelValue: 1, //小于或者等于1px不转换为视窗单位
      mediaQuery: false, //允许在媒体查询中转换'px'
      landscape: false, // 是否处理横屏情况
    }),
    postCssPxToViewport({
      unitToConvert: 'px',
      viewportWidth: 375, //宽度375或者750（常见移动版页面设计稿）
      unitPrecision: 5,
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: [],
      exclude: [],
      include: [/reportMobileScreen/],
      replace: true,
      minPixelValue: 1,
      mediaQuery: false,
      landscape: false,
    }),
  ],
});