React的px转rem

一、安装插件

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

二、在 webpack.config.js中修改

// 先定义

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

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

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />