react配置rem解決移動端適配問題

安裝相關的依賴

npm i lib-flexible --save
npm i sass-loader node-sass --save-dev
npm i postcss-px2rem --save

然后打開項目中 config/webpack.config.js 進行配置

 

 

 // 在配置文件中添加如下兩行代碼

// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 這個是根據750px設計稿來的，如果是620 的就寫 62

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

引入 lib-flexible：在入口文件index.js中引入lib-flexible文件

import 'lib-flexible'

在  public/index.html   文件里把下面的這段代碼注釋掉

 

 

最后重啟項目，打開控制台你講會看到，說明rem配置成功

修改配置后需要重啟，然后我們在組件中寫單位直接寫 px，設計稿量多少就可以寫多少了，舒服多了。