react适配 rem px to rem

第一步   ：

npm install lib-flexible postcss-pxtorem -S 

第二步：

运行指令展示出 webapck.config.js 文件

npm run eject
Are you sure you want to eject? This action is permanent. (y/N) y

  //安装以下包：lib-flexible sass-loader node-sass postcss-px2rem-exclude

  //npm i lib-flexible sass-loader node-sass postcss-px2rem-exclude --save

　　运行出现报错问题时  ：可以在项目文件夹里把 .git 删除掉，即可解决

第三步：

　　在webpack.cocnfig.js 里面引入

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

　　在webpack.config.js 找到下面代码的地方

{
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
    // 新增部分--------可不可以放在 postcssNormalize()下面，你可以自 己试试 下面有一些字段解释
            pxtorem({
              rootValue:37.5,
              propWhiteList:[],
              minPixelValue:2,
              exclude: /node_modules/i
            }),
　　　//   https://www.npmjs.com/package/postcss-pxtorem   不懂上面函数参数意思，可翻阅   下面有部分解释
    // ------------------
            postcssNormalize(),
            
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },

第四步 ：

保存完代码 启动项目

npm start

　　然后接着报错

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

　　这个问题是版本号过高， 你可修改  package.json

"postcss-pxtorem": "^6.0.0",  改成 "^5.1.1"

再次重新 下载依赖   npm i    

运行项目即可  亲身试验可行！！！

三、参数解释

1）rootValue（Number | Function）表示根元素字体大小或根据input参数返回根元素字体大小。

2）unitPrecision （Number）允许REM单位增加的十进制数字。

3）propList （Array）可以从px更改为rem的属性。

• 值必须完全匹配。
• 使用通配符*启用所有属性。例：['*']
• *在单词的开头或结尾使用。（['*position*']将匹配background-position-y）
• 使用!不匹配的属性。例：['*', '!letter-spacing']
• 将“ not”前缀与其他前缀组合。例：['*', '!font*']

4）selectorBlackList （Array）要忽略的选择器，保留为px。

• 如果value是字符串，它将检查选择器是否包含字符串。
  • ['body'] 将匹配 .body-class
• 如果value是regexp，它将检查选择器是否匹配regexp。
  • [/^body$/]将匹配body但不匹配.body

5）replace （Boolean）替换包含rems的规则。

6）mediaQuery （Boolean）允许在媒体查询中转换px。

7）minPixelValue（Number）设置要替换的最小像素值。

8）exclude（String, Regexp, Function）要忽略并保留为px的文件路径。

• 如果value是字符串，它将检查文件路径是否包含字符串。
  • 'exclude' 将匹配 \project\postcss-pxtorem\exclude\path
• 如果value是regexp，它将检查文件路径是否与regexp相匹配。
  • /exclude/i 将匹配 \project\postcss-pxtorem\exclude\path
• 如果value是function，则可以使用exclude function返回true，该文件将被忽略。
  • 回调函数会将文件路径作为参数传递，它应该返回一个布尔结果。
  • function (file) { return file.indexOf('exclude') !== -1; }

 四、补充

　　忽略单个属性的最简单方法是在像素单位声明中使用大写字母，将px写为Px。