react配置px转rem

第1步 安装依赖项

 第2步  引入    在项目入口文件index.js引入lib-flexible

 

 第3步 修改webpack.config.js

3.1  初始化配置

 这一步这里可能会报错的  这样解决

   先 git init  

  然后  git  add .

 最后  git commit -m “init”

然后在重新初始化一下

3.2 引入一下

在webpack.config.js里面找到postcss-loader替换成以下代码

{
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            postcssNormalize(),
            // 新增加---------------------------------------------
            pxtorem({
              rootValue: 37.5, 
              propWhiteList: [],
              minPixelValue: 2,
              exclude: /node_modules/i
            })
            //--------------------------------------------------
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },

 

然后打开项目中 config->webpack.config.js 进行配置
在配置文件中添加如下代码

    

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

把上面的代码放在下面图片中的位置 

   px2rem({ remUnit: 75 }),

把上面代码放在下面图片中的位置
px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的，如果是620 的就写 62

 

 按照设计图大小设置 如：108=1080px/10 

 

然后就配置好了