The react project is configured as a rem pixel unit on the mobile phone

One, use the react-app-rewiredpackage to modify the reactconfiguration

• 1. Install the basic package

  npm install react-app-rewired customize-cra -D
  

• 2. Create a config-overrides.jsfile in the root directory of the project

  const {
        
         override } = require('customize-cra');
  module.exports = {
        
        };
  

• 3. Install the package of style conversion

  npm install less -D
  

• 4. Installation postcss-pxtorempackage

  npm install postcss-pxtorem -D
  

• 5. config-overrides.jsConfigure in

  const {
        
         override, overrideDevServer, addLessLoader, addPostcssPlugins } = require('customize-cra');
  
  module.exports = {
        
        
    webpack: override(
      addLessLoader(),
      // 配置px转rem
      addPostcssPlugins(
        [require('postcss-pxtorem')({
        
         
            rootValue: 75, 
            propList: ['*'],
            minPixelValue: 2, 
            selectorBlackList: ['am-'] 
      })]),
    ),
    devServer: overrideDevServer(config => {
        
        
      return {
        
        
        ...config,
        // 服务开启gzip
        compress: true, 
        // 配置代理
        proxy: {
        
        }
      }
    })
  };
  

• 6, public/index.htmladd code snippets

  <script>
    let docEle = document.documentElement;
    function setRemUnit() {
         
         
      //750/10=75   375/10=37.5
      docEle.style.fontSize = docEle.clientWidth / 10 + 'px';
    }
    setRemUnit();
    window.addEventListener('resize', setRemUnit);
  </script>
  

Two, use packaged configuration

• 1. Install dependencies

  npm install compression-webpack-plugin -D
  

• 2. Basic usage

  
  // 打包配置
  const addCustomize = () => config => {
        
        
    if (process.env.NODE_ENV === 'production') {
        
        
      // 关闭sourceMap
      config.devtool = false;
      // 配置打包后的文件位置
      config.output.path = __dirname + '../dist/demo/';
      config.output.publicPath = './demo';
      // 添加js打包gzip配置
      config.plugins.push(
        new CompressionWebpackPlugin({
        
        
          test: /\.js$|\.css$/,
          threshold: 1024,
        }),
      )
    }
    return config;
  }
  

• 3. Use defined methods

  module.exports = {
        
        
    webpack: override(
      ...
      addCustomize(),
    ),
  }
  

Third, the direct use reactofeffect

Note that when using this function, you cannot modify the content of the project when the project is just created.

• 1. Install dependencies

  npm i px2rem-loader lib-flexible -D
  

• 2. Configurationwebpack

  // 配置css-loader的时候
  {
        
        
    loader:'px2rem-loader',
    options:{
        
        
      remUnit:75,
      remPrecesion:8
    }
  }
  

• 3. The htmlsame as before