react项目配置成手机端rem像素单位

一、使用react-app-rewired包修改react配置

• 1、安装基础的包

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

• 2、在项目的根目录下创建一个config-overrides.js文件

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

• 3、安装样式转换的包

  npm install less -D
  

• 4、安装postcss-pxtorem包

  npm install postcss-pxtorem -D
  

• 5、在config-overrides.js中配置

  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.html中加上代码段

  <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>
  

二、使用打包配置

• 1、安装依赖包

  npm install compression-webpack-plugin -D
  

• 2、基本的使用

  
  // 打包配置
  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、使用定义的方法

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

三、直接使用react的effect

注意点，使用这个功能的时候要在项目刚刚创建的时候,不能修改项目的内容再来使用

• 1、安装依赖包

  npm i px2rem-loader lib-flexible -D
  

• 2、配置webpack

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

• 3、在html中和之前一样的