react 移动端px2rem适配、antd-mobile按需加载配置、px2rem影响第三方UI库样式

一、使用customize-cra 修改 webpack 配置

1. 为什么使用 customize-cra

说到 webpack 配置，很多人都知道在项目根目录下创建 webpck.config.js 文件，然后在该文件中配置参数即可。

但是如果使用脚手架命令，如 create-react-app myproject 创建的项目,是不需要手动配置 webpack 的。但是因项目需要单独配置或者覆盖原始 webpack 配置，该如何做昵？

比较极端的方法是可以使用 npm run eject 命令将 webpack.config.js 暴露出来。然后在该配置文件中进行修改。但其一，该命令是不可逆的。也就是一旦执行了此命令。webpack.config.js 文件就永久的暴露出来。其二，如果只是修改一个很小的配置项。是否可以不执行 npm run eject 也能够配置 webpack 昵。这就是 customize-cra 的作用。

2. customize-cra 使用步骤

（1）下载 customize-cra 和 react-app-rewired

npm install customize-cra react-app-rewired --dev
复制代码

（2）更改 package.json 中的 scripts 配置，如下所示。即用 react-app-rewired命令代替 react-scripts

 //原来的：
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
 //修改后:
 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
复制代码

二、px2rem适配的配置

1. 安装依赖

npm install postcss-px2rem lib-flexible --save
npm install react-app-rewire-postcss --save-dev
复制代码

2. 在项目根目录创建config-overrides.js

const {override}  = require("customize-cra")
const path = require("path")
const rewirePostcss = require('react-app-rewire-postcss');
const px2rem = require('postcss-px2rem')
module.exports = override(
    (config,env)=>{
        rewirePostcss(config,{
            plugins: () => [
                require('postcss-flexbugs-fixes'),
                require('postcss-preset-env')({
                    autoprefixer: {
                        flexbox: 'no-2009',
                    },
                    stage: 3,
                }),
                px2rem({
                    remUnit: 37.5,
                    exclude:/node-modules/
                })
            ],
        });
        return config
    }
);
复制代码

3. 在index.js里边引入

import 'lib-flexible'
复制代码

在index.html中

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

这样直接在项目中写px，就能自动装换成rem，内嵌的一些样式是不能改变的；

开始写的时候发现会有点问题，自动转换把第三方ui库的也给转换了，网上查了一番后，发现是插件的问题，需要更换插件

cnpm i postcss-px2rem-exclude -D
复制代码

然后在config-overrides.js中

module.exports = override(
  (config,env)=>{
    // 重写postcss
    rewirePostcss(config,{
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
        }),
        require("postcss-px2rem-exclude")({
          // remUnit 等于 设计稿宽度  750除以10  37.5
          remUnit: 75,
          exclude: /node_modules/i
        })
      ],
    });
    return config
  },
);
复制代码

三、antd-mobile按需加载

1. 安装依赖

npm install babel-plugin-import --save-dev
npm install antd-mobile --save
复制代码

2. config-overrides.js

const {override,fixBabelImports }  = require("customize-cra")
 module.exports = override(
   //按需加载
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
    }),
    (config,env)=>{
        return config
    }
);
复制代码

参考文档：
blog.csdn.net/qq_42165062…
blog.csdn.net/weixin_4413…