项目示例： https://github.com/easy-team/egg-react-webpack-boilerplate/tree/antd-theme

按需加载

依赖配置

  1. // ${root}/package.json
  2. {
  3.  "devDependencies": {
  4.    "babel-plugin-import": "^1.0.0"
  5.  }
  6. }

代码编写

  1. import { Button } from 'antd';

官方文档： https://ant.design/docs/react/getting-started-cn

主题定制

主题定制需要开启 webpack less 编译

依赖配置

  1. // ${root}/package.json
  2. {
  3.  "devDependencies": {
  4.    "less": "^2.7.2",
  5.    "less-loader": "^4.1.0"
  6.  }
  7. }

构建配置

  1. //${root}/webpack.config.js
  2. const path = require('path');
  3. const resolve = (filepath) => path.resolve(__dirname, filepath);
  4. module.exports = {
  5.   loaders: {
  6.     babel: {
  7.       include: [resolve('app/web'), resolve('node_modules')]
  8.     },
  9.     less: {
  10.       include: [resolve('app/web'), resolve('node_modules')],
  11.       options: {
  12.         javascriptEnabled: true,
  13.         modifyVars: {
  14.           'primary-color': 'red',
  15.           'link-color': '#1DA57A',
  16.           'border-radius-base': '2px'
  17.         }
  18.       }
  19.     }
  20.   }
  21. };

.babelrc 配置

如果是 SSR 模式，需要按如下 env 配置；前端渲染模式可以不用 env 方式。 BABEL_ENV 使用，请参考 https://www.yuque.com/easy-team/egg-react/babel

  1. {
  2.   "env":{
  3.     "node": {
  4.       "presets": [
  5.         "react",
  6.         ["env", {
  7.           "modules": false,
  8.           "targets": {
  9.             "node": "current"
  10.           }
  11.         }]
  12.       ],
  13.       "plugins": [
  14.         "syntax-dynamic-import",
  15.         "transform-object-rest-spread"
  16.       ]
  17.     },
  18.     "web": {
  19.       "presets": [
  20.         "react",
  21.         ["env", {
  22.           "modules": false,
  23.           "targets": {
  24.             "browsers": ["last 2 versions", "safari >= 7"]
  25.           }
  26.         }]
  27.       ],
  28.       "plugins": [
  29.         "react-hot-loader/babel",
  30.         "transform-object-assign",
  31.         "syntax-dynamic-import",
  32.         "transform-object-rest-spread",
  33.         ["import", {
  34.           "libraryName": "antd",
  35.           "libraryDirectory": "lib",
  36.           "style": true
  37.         }]
  38.       ]
  39.     }
  40.   },
  42.   "comments": false
  43. }

官方文档：https://ant.design/docs/react/customize-theme-cn