关于antd-mobile自定义主题 2019-12-06

使用create-react-app2.0搭配antd-mobile构建项目后，发现官网的定制主题流程有些不符，经过一系列的探索后，决定记录下，2.0定制主题的方法。

使用create-react-app脚手架构建项目的过程就不说了，详情参考创建React应用。
（注意：如果您以前create-react-app通过进行了全局安装npm install -g create-react-app，建议您使用卸载软件包，npm uninstall -g create-react-app以确保npx始终使用最新版本。）

导入antd-mobile，参照Ant Design Mobile of React，这里不展开。

以下从成功创建create-react-app@2.xApp及导入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

安装完后的依赖版本：
  "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对webpack配置进行覆盖，再添加react-app-rewired customize-cra两项依赖：

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启动、编译项目：

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

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

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

① antd-mobile按需加载

从这一步开始，官网步骤已经开始出现繁琐及错误，在不暴露webpack配置的情况下，是无法完成的，而一旦执行eject则不可逆。所以这里使用customize-cra对webpack配置进行覆盖，避免将webpack直接暴露出来。

修改 config-overrides.js 文件：

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

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

修改antd-mobile组件导入方式：

import { Button } from 'antd-mobile';

之后npm start重新启动项目，就可以看到组件样式已经是有了的。

② antd-mobile定制主题

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

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文件。
根据modifyVars项自由定制主题，一般由外部导入主题包赋值给modifyVars，这里写例子就直接写死了。关于antd-mobile所有可修改样式参考如下链接全部主题样式参考这里。

再将样式封装一下，在项目根目录创建一个json文件antd-theme.json:

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

用来存在定制的主题样式，这里修改了primary颜色跟字体颜色，然后在config-overrides.js中引入：

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

修改modifyVars为theme，再修改下App.js做一个简单的展示：

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

const App = () => {

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

export default App;

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

1575621602936.jpg

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

最后

什么？你的定制主题还是没显示？

1. 请检查项目构建流程是否有按照以上步骤进行；
2. 请检查你的定制主题属性，是否与你显示的组件对应
   比如：你写了这一条定制样式'@brand-primary': '#1DA57A'，对应的是组件primary样式，则你的组件需要加上type='primary'属性才生效；
3. 请确认style属性已经设置成true;
4. 请确认各项依赖版本号，react-app-rewired需要2.0.0以上；