React configuration px conversion rem method

Install related dependencies

npm i lib-flexible --save
npm i postcss-px2rem --save

Mainly used to expose project configuration

npm run eject
! If you run npm run eject and get an error, the error may be caused by the code in the repository not being submitted. Submit it as follows
git add .
git commit -m 'custom name'
npm run eject

Then open the project config->webpack.config.js for configuration

// Add the following two lines of code to the configuration file
// px2rem({ remUnit: 75 }) means 1rem = 75px. This is based on the 750px design draft. If it is 620, write 62

const px2rem = require('postcss-px2rem');
px2rem({ remUnit: 75 })

Set according to the design size, such as: 108 = 1080px/10

Import lib-flexible: Import the lib-flexible file into the entry file index.js

import 'lib-flexible'

Comment out the following code in the public->index.html file

Restart the project after configuration is complete

This is the end of this article about how to configure react to convert px to rem. For more information about how to configure react to convert px to rem, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!