react，antd-mobile的按需引入，适配，主题定制 第二种方法

按需引入
0：npm install antd-mobile --save
1：npm i react-app-rewired@2.0.2-next.0
2.更改package,json文件的“script”内容为

	"scripts": {
	  "start": "react-app-rewired start",
	  "build": "react-app-rewired build",
	  "test": "react-app-rewired test --env=jsdom",
	  "eject": "react-scripts eject"
	},

3：npm install babel-plugin-import --save-dev
4：在项目根目录创建一个 config-overrides.js 用于修改默认配置。
5：

	const { injectBabelPlugin } = require('react-app-rewired');
	module.exports = function override(config,env) {
	    config = injectBabelPlugin(['import',{ libraryName: 'antd-mobile',style:'css'}],config)
	    return config
	}

定制主题以及手机适配
1：项目\public\index.html的header 头部中引用
引入： 也就是以下的js

	!function (e) { function t(a) { if (i[a]) return i[a].exports; var n = i[a] = { exports: {}, id: a, loaded: !1 }; return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports } var i = {}; return t.m = e, t.c = i, t.p = "", t(0) }([function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var i = window; t["default"] = i.flex = function (e, t) { var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent, d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.){5,})/i), c = l && parseInt(l[1].split(".").join(""), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi), s = i.devicePixelRatio || 1; p || d && d[1] > 534 || c || (s = 1); var u = 1 / s, m = r.querySelector('meta[name="viewport"]'); m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px" }, e.exports = t["default"] }]);
flex(100, 1);

2：这里的主体定制的放在了 package.json

	"theme": {
	    "hd": "2px",
	    "brand-primary": "red",
	    "color-text-base": "#333"
	},
	"scripts": {
	    "start": "set PORT= 8885 &&  react-app-rewired start",
	    "build": "react-app-rewired build",
	    "test": "react-app-rewired test",
	    "eject": "react-scripts eject"
  },

3：

npm install react-app-rewire-postcss --save-dev
npm i postcss-pxtorem -D

4：修改config-overrides.js 为以下代码

 const { injectBabelPlugin, getLoader } = require('react-app-rewired');
const rewirePostcss = require('react-app-rewire-postcss');
const pxtorem = require('postcss-pxtorem');
const autoprefixer = require('autoprefixer');
const theme = require('./package.json').theme;

const fileLoaderMatcher = function (rule) {
    return rule.loader && rule.loader.indexOf(`file-loader`) != -1;
}
module.exports = function override(config, env) {
    // do stuff with the webpack config...
    config = injectBabelPlugin(['import', {
        libraryName: 'antd-mobile',
        // style: 'css',
        style: true, // use less for customized theme
    }], config);
    

    
    // //less
    config.module.rules[2].oneOf.unshift(
        {
            test: /\.less$/,
            use: [
                require.resolve('style-loader'),
                require.resolve('css-loader'),
                {
                    loader: require.resolve('postcss-loader'),
                    options: {
                        // Necessary for external CSS imports to work
                        // https://github.com/facebookincubator/create-react-app/issues/2677
                        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',
                            }),
                        ],
                    },
                },
                {
                    loader: require.resolve('less-loader'),
                    options: {
                        modifyVars: theme
                        }
                },
            ]
        }
    );
    config = rewirePostcss(config,{
        plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
                autoprefixer: {
                    flexbox: 'no-2009',
                },
                stage: 3,
            }),
            pxtorem({
                rootValue: 50,    //以100px为准，不同方案修改这里
                propWhiteList: [],
            })
        ],
    });

    // file-loader exclude
    let l = getLoader(config.module.rules, fileLoaderMatcher);
    l.exclude.push(/\.scss$/);
    l.exclude.push(/\.less$/);
    return config;
};

5：定制主题以及手机适配 按需引入等功能完毕