postcss-px-to-viewport

我用的1.1.1版本

首先在webpack里面配置，找不到webpack.config.js就先暴露出来npm run eject

找到webpcak对应地点进行配置

options: {
          postcssOptions: {
            // Necessary for external CSS imports to work
            // https://github.com/facebook/create-react-app/issues/2677
            ident: "postcss",
            config: false,
            plugins: !useTailwind
              ? [
                  "postcss-flexbugs-fixes",
                  [
                    "postcss-preset-env",
                    {
                      autoprefixer: {
                        flexbox: "no-2009",
                      },
                      stage: 3,
                    },
                  ],
                  // Adds PostCSS Normalize as the reset css with default options,
                  // so that it honors browserslist config in package.json
                  // which in turn let's users customize the target behavior as per their needs.
                  [
                    'postcss-px-to-viewport',
                    {
                      viewportWidth: 1920, // (Number) The width of the viewport.
                      viewportHeight: 2925.5, // (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: [], // (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-normalize",
                ]
              : [
                  "tailwindcss",
                  "postcss-flexbugs-fixes",
                  [
                    "postcss-preset-env",
                    {
                      autoprefixer: {
                        flexbox: "no-2009",
                      },
                      stage: 3,
                    },
                  ],
                ],
          },
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },

配置完毕npm start就可以看见转化为vw，如果要更改配置，改完之后重新启动项目就可以看见改变