react中px转rem，踩坑记

临近放假，公司没什么事，从GitHub拉个项目来学习下。想不到刚刚搭建项目就遇到了问题。

问题：postcss-px2rem与postcss8不兼容问题。

因为是移动端项目，所以用rem做单位，所以运行命令npm i postcss-px2rem安装px2rem
根据网上的教程：
在webpack.config.js配置文件中做相应的配置：

const px2rem = require('postcss-px2rem');

一顿操作后，运行项目npm start
报错

改为用postcss-pxtorem，

1.安装:

npm install lib-flexible postcss-pxtorem -S

2.引入

import 'lib-flexible';

3.修改webpack.config.js的配置

const px2rem = require('postcss-pxtorem');
{
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        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-nested',
                  '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.
                px2rem({
                  rootValue: 75,
                  propWhiteList: [],
                  minPixelValue: 2,
                  exclude: /node_modules/i
                  }), //设计稿根据750px(iphone6)
                'postcss-normalize',
                ]
              : [
                  'tailwindcss',
                  'postcss-flexbugs-fixes',
                  [
                    'postcss-preset-env',
                    {
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3,
                    },
                  ],
                ],
          },
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },

4.重启

npm start

5.成功