React里px转rem

1.安装postcss-pxtorem

npm install lib-flexible postcss-pxtorem -S

2.在src目录下index.js里引入lib-flexible

import 'lib-flexible';

3.修改webpack.config.js

3.1让隐藏的配置文件显示出来

npm run eject

如果报错就按以下步骤进行

git add.

git commit -m '备注'

npm run eject

3.2修改webpack.config.js

先引入

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

找到下面代码

将上图代码替换成下面的代码

{
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            postcssNormalize(),
            // 新增加---------------------------------------------
            pxtorem({
              rootValue: 75, 
              propWhiteList: [],
              minPixelValue: 2,
              exclude: /node_modules/i
            })
            //--------------------------------------------------
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },

4.如果报如下错误，说明posscss-pxtorem版本太高，修改下版本就好

npm i postcss-pxtorem@5.1.1 -S

5.再次启动项目就好了