You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We are using [Less](http://lesscss.org/) as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
13
13
@@ -17,46 +17,80 @@ Please report an issue if the existing list of variables is not enough for you.
17
17
18
18
## How to do it
19
19
20
-
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.
20
+
We will use [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) provided by less.js to override the default values of the variables, You can use this [example](https://github.com/ant-design/create-react-app-antd) as a live playground. We now introduce some popular way to do it depends on different workflow.
21
+
22
+
### Customize in webpack
23
+
24
+
We take a typical `webpack.config.js` file as example to customize it's [less-loader](https://github.com/webpack-contrib/less-loader) options.
25
+
26
+
```diff
27
+
// webpack.config.js
28
+
module.exports = {
29
+
rules: [{
30
+
test: /\.less$/,
31
+
use: [{
32
+
loader: 'style-loader',
33
+
}, {
34
+
loader: 'css-loader', // translates CSS into CommonJS
35
+
}, {
36
+
loader: 'less-loader', // compiles Less to CSS
37
+
+ options: {
38
+
+ modifyVars: {
39
+
+ 'primary-color': '#1DA57A',
40
+
+ 'link-color': '#1DA57A',
41
+
+ 'border-radius-base': '2px',
42
+
+ },
43
+
+ javascriptEnabled: true,
44
+
+ },
45
+
}],
46
+
// ...other rules
47
+
}],
48
+
// ...other config
49
+
}
50
+
```
51
+
52
+
Note that do not exclude antd package in node_modules when using less-loader.
21
53
22
-
You can use this [example](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) as a playground.
54
+
### Customize in roadhug or Umi
23
55
24
-
### 1) Using `theme`property (recommended way)
56
+
You can easily use `theme`field in `.webpackrc` file of your project root directory if you are using 如果你在使用 [roadhug](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/)， which could be a object or a javascript file path.
25
57
26
-
Specify the `theme` property in the `package.json` or `.webpackrc` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
27
-
- example of directly specifying the custom values as an object:
28
58
```js
29
59
"theme": {
30
60
"primary-color":"#1DA57A",
31
61
},
32
62
```
33
-
- example of specifying a [file path](https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js) to a JS file:
63
+
64
+
Or just [a javascript file path](https://github.com/ant-design/ant-design-pro/blob/3c2a056ef0dac06ce3b4389192691bb1f5c448e2/.webpackrc.js#L19):
65
+
34
66
```js
35
67
"theme":"./theme.js",
36
68
```
37
69
38
-
This approach is available only when using [antd-init](https://github.com/ant-design/antd-init) or [dva-cli](https://github.com/dvajs/dva-cli). If you choose other boilerplates, you can write a 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.
70
+
### Customize in create-react-app
39
71
40
-
Note:
72
+
Follow [Use in create-react-app](/docs/react/create-react-app).
41
73
42
-
- Importing styles from less files is necessary.
43
-
- If you import styles by specifying the `style` option of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), change it from `'css'` to `true`, which will import the `less` version of antd.
44
-
- If you import styles from `'antd/dist/antd.css'`, change it to `antd/dist/antd.less`.
45
-
- When using `dva-cli@0.7.0+`, you should add the `theme` block to [.roadhogrc](https://github.com/dvajs/dva-example-user-dashboard/commit/d6da33b3a6e18eb7f003752a4b00b5a660747c31) instead of `package.json`.
46
-
- If you want to override `@icon-url`, the value must be contained in quotes like `"@icon-url": "'your-icon-font-path'"` ([A fix sample](https://github.com/visvadw/dvajs-user-dashboard/pull/2)).
74
+
### Customize in less file
47
75
48
-
### 2) Overriding Less variables (alternative way)
76
+
Another approach to customize theme is creating a `less` file within variables to override `antd.less`.
49
77
50
-
Override variables via less definition files.
78
+
```css
79
+
@import"~antd/dist/antd.less"; // Import Ant Design styles by less entry
80
+
@import"your-theme-file.less"; // variables to override above
81
+
```
51
82
52
-
Create a standalone less file like the one below, and import it in your project.
83
+
Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
53
84
54
-
```css
55
-
@import"~antd/dist/antd.less"; // import official less entry file
56
-
@import"your-theme-file.less"; // override variables here
57
-
```
85
+
## Not working?
58
86
59
-
Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
87
+
You must import styles as less format. A common mistake would be importing multiple copied of styles that some of them are css format to override the less styles.
88
+
89
+
- If you import styles by specifying the `style` option of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), change it from `'css'` to `true`, which will import the `less` version of antd.
90
+
- If you import styles from `'antd/dist/antd.css'`, change it to `antd/dist/antd.less`.
91
+
- When using `dva-cli@0.7.0+`, you should add the `theme` block to [.roadhogrc](https://github.com/dvajs/dva-example-user-dashboard/commit/d6da33b3a6e18eb7f003752a4b00b5a660747c31) instead of `package.json`.
92
+
93
+
If you want to override `@icon-url`, the value must be contained in quotes like `"@icon-url": "'your-icon-font-path'"` ([A fix sample](https://github.com/visvadw/dvajs-user-dashboard/pull/2)).
0 commit comments