React px转rem

rem 是相对于根元素 < html > 的，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。

安装插件 lib-flexible ，postcss-px2rem-exclude

npm install lib-flexible postcss-px2rem-exclude -D

在 webpack.config.js中修改

{
 	loader: require.resolve("postcss-loader"),
	  options: {
	    ident: "postcss",
	    plugins: () => [
	      require("postcss-flexbugs-fixes"),
	      require("postcss-preset-env")({
	        autoprefixer: {
	          flexbox: "no-2009"
	        },
	        stage: 3
	      }),
	      require("postcss-px2rem-exclude")({
	        // remUnit 等于 设计稿宽度  375除以10  37.5
	        remUnit: 37.5,
	        exclude: /node_modules/i
	      }),
	      require("autoprefixer"),
	      postcssNormalize()
	    ]
	  }
	}

在入口文件处

import "lib-flexible";

在 index.html 中

// 将name 为 viewport 的meta标签，修改为如下所示：
// 禁止缩放
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

重启项目就OK了，在写样式的时候，设计图量的是多少就写多少px，会自动转为相应的rem的