准备开发环境，引入AntDesign

Node.js

按照官网步骤装好node.js，同时会安装上npm，另外再安装上yarn

使用create-react-app安装react

 

cd antd-demo

Yarn start

自动弹出localhost:3000

 

安装并引入antd

修改 src/App.js，引入 antd 的按钮组件。（line 2）

 

 

修改src/App.css，在文件顶部引入 antd/dist/antd.css

 

 

页面显示：

 

然后就可以继续选用其他组件开发应用了。

高级配置（对上述内容进行优化）

安装craco

 

 

修改package.json 里的 scripts 属性

 

 

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

 

 

 

自定义主题

按照 配置主题 的要求，自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能。我们可以引入 craco-less 来帮助加载 less 样式和修改变量。

 

 

 

首先把 src/App.css 文件修改为 src/App.less，然后修改样式引用为 less 文件。

 

 

然后安装 craco-less 并修改 craco.config.js 文件如下

 

 

 

这里利用了 less-loader 的 modifyVars 来进行主题配置，变量和其他配置方式可以参考 配置主题 文档。修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了

 

 

 

原理上是使用 less 提供的 modifyVars 的方式进行覆盖变量.