react项目中px转rem

第一步：安装 postcss-px2rem-exclude、lib-flexible、sass-loader、node-sass

npm insatll lib-flexible sass-loader node-sass postcss-px2rem-exclude --save

如果一起下载报错的话可以分开下载

        npm insatll  postcss-px2rem-exclude  --save

        npm insatll lib-flexible -D

第二步：找到webpack.config.js  

路径：node_modules>react-scripts>config>webpack.config.js

先引入postcss-px2rem-exclude,然后在postcss-loader的plugins中加入 

const px2rem = require('postcss-px2rem-exclude');

 修改一下

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ],
        flexbox: 'no-2009',
      }),
//px2rem加在这里
      px2rem({
        remUnit:75,exclude: /node_modules/i
      })
    ],
  },
},

第三步：在react入口文件引入lib-flexible

import "lib-flexible"

第四步：修改index.html 禁止缩放

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

第五步：完成后重启才能生效。

npm start