React配置px转rem响应式布局

一，搭建react环境

create-react-app dome

二，安装依赖

cnpm i postcss-pxtorem  amfe-flexible  @craco/craco

三，配置

1，在项目根目录下创建craco.config.js文件

2，把代码复制进去

const pxtorem = require('postcss-pxtorem')

module.exports = {
  style: {
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [[
            pxtorem({
              rootValue: 75,//根据ui提供的效果图修改  看是1x还是2x
              propList: ['*'],
              minPixelValue: 3,
              exclude: /node_modules/i,
            })]],
        },
      },
    },
  },
};

 3，在index.js文件导入amfe-flexible 

import 'amfe-flexible';

 

4，修改package.json 

将scripts中的代码进行替换

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

配置完以上操作就可以开发了