使用create-react-app2.0搭配antd-mobile構(gòu)建項(xiàng)目后，發(fā)現(xiàn)官網(wǎng)的定制主題流程有些不符，經(jīng)過(guò)一系列的探索后，決定記錄下，2.0定制主題的方法。

使用create-react-app腳手架構(gòu)建項(xiàng)目的過(guò)程就不說(shuō)了，詳情參考創(chuàng)建React應(yīng)用。
（注意：如果您以前create-react-app通過(guò)進(jìn)行了全局安裝npm install -g create-react-app，建議您使用卸載軟件包，npm uninstall -g create-react-app以確保npx始終使用最新版本。）

導(dǎo)入antd-mobile，參照Ant Design Mobile of React，這里不展開(kāi)。

以下從成功創(chuàng)建create-react-app@2.xApp及導(dǎo)入antd-mobile后開(kāi)始。

開(kāi)始

首先，你的項(xiàng)目里需要包含如下依賴 babel-plugin-import less less-loader style-loader css-loader 。

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

安裝完后的依賴版本：
  "devDependencies": {
    "babel-plugin-import": "^1.13.0",
    "css-loader": "^3.2.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "style-loader": "^1.0.1"
  }

在不暴露webpack配置文件的情況下，需要使用customize-cra對(duì)webpack配置進(jìn)行覆蓋，再添加react-app-rewired customize-cra兩項(xiàng)依賴：

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

"customize-cra": "^0.9.1",
"react-app-rewired": "^2.1.5",

修改package.json文件，使用react-app-rewired啟動(dòng)、編譯項(xiàng)目：

/* package.json */
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
}

然后在項(xiàng)目根目錄創(chuàng)建一個(gè) config-overrides.js 用于修改默認(rèn)配置：

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

① antd-mobile按需加載

從這一步開(kāi)始，官網(wǎng)步驟已經(jīng)開(kāi)始出現(xiàn)繁瑣及錯(cuò)誤，在不暴露webpack配置的情況下，是無(wú)法完成的，而一旦執(zhí)行eject則不可逆。所以這里使用customize-cra對(duì)webpack配置進(jìn)行覆蓋，避免將webpack直接暴露出來(lái)。

修改 config-overrides.js 文件：

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

 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd-mobile',
     libraryDirectory: 'es',
     style: 'css',
   }),
 );

修改antd-mobile組件導(dǎo)入方式：

import { Button } from 'antd-mobile';

之后npm start重新啟動(dòng)項(xiàng)目，就可以看到組件樣式已經(jīng)是有了的。

② antd-mobile定制主題

定制主題，也是在config-overrides.js文件進(jìn)行更改

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

module.exports = override(
    addLessLoader({
      javascriptEnabled: true,
      modifyVars: {'@brand-primary': '#1DA57A'},
    }),
    fixBabelImports('import', {
      libraryName: 'antd-mobile',
      libraryDirectory: 'es',
      style: true,
    }),
);

使用addLessLoader插入less-loader，修改style為true，確保加載less文件。
根據(jù)modifyVars項(xiàng)自由定制主題，一般由外部導(dǎo)入主題包賦值給modifyVars，這里寫(xiě)例子就直接寫(xiě)死了。關(guān)于antd-mobile所有可修改樣式參考如下鏈接全部主題樣式參考這里。

再將樣式封裝一下，在項(xiàng)目根目錄創(chuàng)建一個(gè)json文件antd-theme.json:

{
    "@brand-primary": "#ff5722",
    "@brand-primary-tap": "#ffccbc",
    "@color-text-base-inverse": "#3f51b5"
}

用來(lái)存在定制的主題樣式，這里修改了primary顏色跟字體顏色，然后在config-overrides.js中引入：

const theme = require('./antd-theme');
//...
modifyVars: theme,
//...

修改modifyVars為theme，再修改下App.js做一個(gè)簡(jiǎn)單的展示：

import React from 'react';
import { Button } from 'antd-mobile';

const App = () => {

    return (
        <div>
            <Button type="primary">antd-mobile定制主題</Button>
        </div>
    );
};

export default App;

最后運(yùn)行npm start重新啟動(dòng)項(xiàng)目，就能看到效果了。

1575621602936.jpg

如此，關(guān)于antd-mobile定制主題就成功了，也不需要暴露webpack配置，也沒(méi)有antd-mobile官網(wǎng)寫(xiě)的那么多亂七八糟的步驟，保持項(xiàng)目的整潔。

最后

什么？你的定制主題還是沒(méi)顯示？

1. 請(qǐng)檢查項(xiàng)目構(gòu)建流程是否有按照以上步驟進(jìn)行；
2. 請(qǐng)檢查你的定制主題屬性，是否與你顯示的組件對(duì)應(yīng)
   比如：你寫(xiě)了這一條定制樣式'@brand-primary': '#1DA57A'，對(duì)應(yīng)的是組件primary樣式，則你的組件需要加上type='primary'屬性才生效；
3. 請(qǐng)確認(rèn)style屬性已經(jīng)設(shè)置成true;
4. 請(qǐng)確認(rèn)各項(xiàng)依賴版本號(hào)，react-app-rewired需要2.0.0以上；