React使用rem

1、安装依赖包

npm install lib-flexible --save
npm install postcss-px2rem --save

2、配置

• 导出 webpack 配置文件 :
  npm run eject
• 修改config/webpack.config.js
  引入模块 : const px2rem = require('postcss-px2rem')
  添加配置 : px2rem({ remUnit: 37.5 })
  如下所示：

const px2rem = require('postcss-px2rem')
{
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009'
              },
              stage: 3
            }),
            px2rem({ remUnit: 37.5 }),   //  添加的代码
            postcssNormalize()
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap
        }
      }

3、在入口文件 index.js 里引入 lib-flexible

import 'lib-flexible'

4、重新运行项目

npm start

演示效果：

image.png

参考博客：
https://www.cnblogs.com/yinhao-jack/p/13253603.html