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中和之前一样的