Skip to content

Commit

Permalink
docs: improve use in typescript (ant-design#28739)
Browse files Browse the repository at this point in the history
  • Loading branch information
hengkx authored Jan 10, 2021
1 parent c53afea commit bf9cedf
Showing 1 changed file with 7 additions and 11 deletions.
18 changes: 7 additions & 11 deletions docs/react/use-in-typescript.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ module.exports = {

### 自定义主题

按照 [配置主题](/docs/react/customize-theme) 的要求,自定义主题需要用到类似 [less-loader](https://github.com/webpack-contrib/less-loader/) 提供的 less 变量覆盖功能。我们可以引入 [craco-less](https://github.com/DocSpring/craco-less) 来帮助加载 less 样式和修改变量。
按照 [配置主题](/docs/react/customize-theme) 的要求,自定义主题需要用到类似 [less-loader](https://github.com/webpack-contrib/less-loader/) 提供的 less 变量覆盖功能。我们可以引入 [craco-antd](https://github.com/DocSpring/craco-antd) 来帮助加载 less 样式和修改变量。

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

Expand All @@ -118,28 +118,24 @@ module.exports = {
```diff
/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';
```

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

```bash
$ yarn add craco-less
$ yarn add craco-antd
```

```js
const CracoLessPlugin = require('craco-less');
const CracoAntDesignPlugin = require('craco-antd');

module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
plugin: CracoAntDesignPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
customizeTheme: {
'@primary-color': '#1DA57A',
},
},
},
Expand Down

0 comments on commit bf9cedf

Please sign in to comment.