antd-mobile定制主题

create-react-app 是业界最优秀的 React 相关应用开发工具之一，本文档尝试以此工具来使用 antd-mobile 组件。

创建一个项目

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
打开http://localhost:3000/访问你的应用。

安装Ant Design Mobile

npm install antd-mobile --save

引入antd-mobile

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

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

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

(2)然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

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

(3)使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

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

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

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd-mobile',
+     style: 'css',
+   }),
+ );

(4)更改引用方式

- import Button from 'antd-mobile/lib/button';
+ import { Button } from 'antd-mobile';

antd-mobile定制主题

首先，你的项目里需要包含如下依赖 babel-plugin-import less less-loader style-loader css-loader 。

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

定制主题，也是在config-overrides.js文件进行更改

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const theme = require('./antd-theme.json')


module.exports = override(
    addLessLoader({
        lessOptions:{
            javascriptEnabled: true,
            modifyVars:theme,
        }
    }),
    fixBabelImports('import', {
      libraryName: 'antd-mobile',
      libraryDirectory: 'es',
      style: true,
    }),
);

使用addLessLoader插入less-loader，修改style为true，确保加载less文件。
根据modifyVars项自由定制主题，一般由外部导入主题包赋值给modifyVars，这里写例子就直接写死了。关于antd-mobile所有可修改样式参考如下链接全部主题样式参考这里。
再将样式封装一下，在项目根目录创建一个json文件antd-theme.json:

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

最后运行npm start重新启动项目，就能看到效果了。

如此，关于antd-mobile定制主题就成功了，也不需要暴露webpack配置，也没有antd-mobile官网写的那么多乱七八糟的步骤，保持项目的整洁。

本博客是自己在学习的过程遇到的问题，如有侵权请告知，24小时立马删除。

参考博客：简书作者：讨厌西红柿