react，antd-mobile的按需引入，适配，主题定制

1：第一种方法

按需引入办法
1：安装antd-mobile

npm install antd-mobile --save

2：引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。

npm install react-app-rewired customize-cra --save-dev

3：修改package,json文件的“script”内容为

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

4：安装babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

npm install babel-plugin-import --save-dev

5：在项目根目录创建一个 config-overrides.js 用于修改默认配置。

const { override, fixBabelImports} = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
    }),
 );

修改 app.js为以下代码

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'antd-mobile';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Button type="primary" disabled>primary disabled</Button>
      </header>
    </div>
  );
}

export default App;

以下为定制主题
1：你的项目里需要包含如下依赖 babel-plugin-import less less-loader style-loader css-loader 。

npm install --save-dev babel-plugin-import less less-loader style-loader css-loader

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：在刚才创建的config-overrides.js中 修改为以下内容

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const theme = require('./package.json').theme
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: theme
        }
    }),

);

以下为手机适配
1：

npm install postcss-px2rem-exclude --save

2：在config-overrides.js中 修改为以下内容

const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra');

const theme = require('./package.json').theme;
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: theme
        }
    }),
    addPostcssPlugins(
        [require("postcss-px2rem-exclude")({
            remUnit: 16,  //这里是比列 1rem = 16px
            propList: ['*'],
            exclude: ''
        })]
    ),

);

2:第二种方法

按需引入
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
	}

定制主题以及手机适配
这里的less-loader一定要在5.0版本一下 推荐使用 4.1.0
1：npm install --save-dev babel-plugin-import less style-loader css-loader
2：npm install less-loader@4.1.0
3：项目\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);

4：这里的主体定制的放在了 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"
  },

5：

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

5：修改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：定制主题以及手机适配 按需引入等功能完毕