react next vw适配方案

• 安装依赖: yarn add postcss-aspect-ratio-mini postcss-preset-env postcss-cssnext postcss-flexbugs-fixes postcss-loader postcss-px-to-viewport postcss-viewport-units postcss-write-svg -D
• 根目录创建 postcss.config.js

/*
 * @Description:
 * @version:
 * @Author: 周凯
 * @Date: 2020-07-17 09:27:23
 * @LastEditors: 周凯
 * @LastEditTime: 2020-07-17 09:30:30
 */
module.exports = {
  plugins: {
    "postcss-flexbugs-fixes": {},
    "postcss-preset-env": {
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
    },
    "postcss-aspect-ratio-mini": {},
    "postcss-px-to-viewport": {
      viewportWidth: 1920, // (Number) The width of the viewport.
      viewportHeight: 1080, // (Number) The height of the viewport.
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: "vw", // (String) Expected units.
      selectorBlackList: [".ignore", ".hairlines"], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
    },
    "postcss-write-svg": {
      utf8: false,
    },
    "postcss-preset-env": {},
    "postcss-viewport-units": {},
    cssnano: {
      //旧的 --坑点
      // preset: "advanced",
      // autoprefixer: false,
      // "postcss-zindex": false
      //新配置继续使用高级配置,按照这个配置
      "cssnano-preset-advanced": {
        zindex: false,
        autoprefixer: false,
      },
    },
  },
};

• 效果