From 047476efafb8593876d366febeee56804adc7a1e Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 28 Dec 2016 00:23:32 +0800 Subject: [PATCH] update customize-theme doc --- docs/react/customize-theme.en-US.md | 7 +++++-- docs/react/customize-theme.zh-CN.md | 5 ++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index c74f6c6db8..ec81c5f23e 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -15,7 +15,7 @@ We are using [Less](http://lesscss.org/) as the development language of style. A Please report an issue if the existing list of variables is not enough for you. -## How to use it +## How to do it We recommend [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) to override the default values of the variables. There are two ways to achieve it in practice. @@ -37,7 +37,10 @@ Specify the `theme` property in `package.json` file, whose value can be either a This approach is working only when using [atool-build](https://github.com/ant-tool/atool-build)(built in [antd-init](https://github.com/ant-design/antd-init) and [dva-cli](https://github.com/dvajs/dva-cli)). If you choose other boilerplates, you can write webpack config about [less-loader modifyVars](https://github.com/webpack/less-loader#less-options) like [atool-build ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138) does. -Note: Importing less style is necessary. Please specify `style` option of `babel-plugin-import` to be `true`. +Note: + +- Importing style from less files is necessary. Please specify `style` option of `babel-plugin-import` to be `true`. +- If you want to override `@icon-url`, the quotes must be contained in value like `"@icon-url": "'your-icon-font-path'"` ([A fix sample](https://github.com/visvadw/dvajs-user-dashboard/pull/2)). ### 2) Overriding Less variables (alternative way) diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index d050f29461..93064d170d 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -40,7 +40,10 @@ antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定 定义 `package.theme` 时， 需要配合 [atool-build](https://github.com/ant-tool/atool-build) 使用（[antd-init](https://github.com/ant-design/antd-init) 和 [dva-cli](https://github.com/dvajs/dva-cli) 内建支持）。如果你使用的是其他脚手架，可以参考 [atool-build 中 less-loader 的 webpack 相关配置 ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138)，利用 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 配置来覆盖原来的样式变量。 -注意，样式必须加载 less 格式。如果您使用了 `babel-plugin-import`，请将 style 属性配置为 `true`。 +注意： + +- 样式必须加载 less 格式。如果您使用了 `babel-plugin-import`，请将 style 属性配置为 `true`。 +- 如果要覆盖 `@icon-url` 变量，内容需要包括引号 `"@icon-url": "'your-icon-font-path'"`（[修正示例](https://github.com/visvadw/dvajs-user-dashboard/pull/2)）。 ### 2) less