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.
There are some major variables below, all less variables could be found in [Default Variables](https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less).
15
+
16
+
```less
17
+
@primary-color: #1890ff; // primary color for all components
18
+
@link-color: #1890ff; // link color
19
+
@success-color: #52c41a; // success state color
20
+
@warning-color: #faad14; // warning state color
21
+
@error-color: #f5222d; // error state color
22
+
@font-size-base: 14px; // major text font size
23
+
@heading-color: rgba(0, 0, 0, .85); // heading text color
24
+
@text-color: rgba(0, 0, 0, .65); // major text color
25
+
@text-color-secondary : rgba(0, 0, 0, .45); // secondary text color
26
+
@disabled-color : rgba(0, 0, 0, .25); // disable state color
27
+
@border-radius-base: 4px; // major border radius
28
+
@border-color-base: #d9d9d9; // major border color
29
+
@box-shadow-base: 02px8pxrgba(0, 0, 0, .15); // major shadow for layers
30
+
```
15
31
16
32
Please report an issue if the existing list of variables is not enough for you.
17
33
18
34
## How to do it
19
35
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.
36
+
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. We now introduce some popular way to do it depends on different workflow.
37
+
38
+
### Customize in webpack
39
+
40
+
We take a typical `webpack.config.js` file as example to customize it's [less-loader](https://github.com/webpack-contrib/less-loader) options.
41
+
42
+
```diff
43
+
// webpack.config.js
44
+
module.exports = {
45
+
rules: [{
46
+
test: /\.less$/,
47
+
use: [{
48
+
loader: 'style-loader',
49
+
}, {
50
+
loader: 'css-loader', // translates CSS into CommonJS
51
+
}, {
52
+
loader: 'less-loader', // compiles Less to CSS
53
+
+ options: {
54
+
+ modifyVars: {
55
+
+ 'primary-color': '#1DA57A',
56
+
+ 'link-color': '#1DA57A',
57
+
+ 'border-radius-base': '2px',
58
+
+ },
59
+
+ javascriptEnabled: true,
60
+
+ },
61
+
}],
62
+
// ...other rules
63
+
}],
64
+
// ...other config
65
+
}
66
+
```
21
67
22
-
### 1) Using `theme` property (recommended way)
68
+
Note that do not exclude antd package in node_modules when using less-loader.
23
69
24
-
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:
25
-
- example of directly specifying the custom values as an object:
26
-
```js
27
-
"theme": {
28
-
"primary-color":"#1DA57A",
29
-
},
30
-
```
31
-
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 vue cli 2
32
71
33
-
Note:
72
+
Modify the `build/utils.js` file
73
+
```diff
74
+
// build/utils.js
75
+
- less: generateLoaders('less'),
76
+
+ less: generateLoaders('less', {
77
+
+ modifyVars: {
78
+
+ 'primary-color': '#1DA57A',
79
+
+ 'link-color': '#1DA57A',
80
+
+ 'border-radius-base': '2px',
81
+
+ },
82
+
+ javascriptEnabled: true,
83
+
+ }),
34
84
35
-
- Importing styles from less files is necessary.
36
-
- 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.
37
-
- If you import styles from `'ant-design-vue/dist/antd.css'`, change it to `ant-design-vue/dist/antd.less`.
38
-
- If you want to override `@icon-url`, the value must be contained in quotes like `"@icon-url": "'your-icon-font-path'"`.
85
+
```
39
86
40
-
### 2) Overriding Less variables (alternative way)
87
+
### Customize in vue cli 3
41
88
42
-
Override variables via less definition files.
89
+
Create a new file `vue.config.js` in the project directory.
90
+
```
91
+
// vue.config.js
92
+
module.exports = {
93
+
configureWebpack: {
94
+
module: {
95
+
rules: [{
96
+
test: /\.less$/,
97
+
use: [{
98
+
loader: 'style-loader',
99
+
}, {
100
+
loader: 'css-loader',
101
+
}, {
102
+
loader: 'less-loader',
103
+
options: {
104
+
modifyVars: {
105
+
'primary-color': '#1DA57A',
106
+
'link-color': '#1DA57A',
107
+
'border-radius-base': '2px',
108
+
},
109
+
javascriptEnabled: true,
110
+
},
111
+
}],
112
+
}],
113
+
},
114
+
}
115
+
}
116
+
```
43
117
44
-
Create a standalone less file like the one below, and import it in your project.
118
+
### Customize in less file
45
119
46
-
```less
47
-
@import"~ant-design-vue/dist/antd.less"; // import official less entry file
48
-
@import"your-theme-file.less"; // override variables here
49
-
```
120
+
Another approach to customize theme is creating a `less` file within variables to override `antd.less`.
121
+
122
+
```css
123
+
@import"~antd/dist/antd.less"; // Import Ant Design styles by less entry
124
+
@import"your-theme-file.less"; // variables to override above
125
+
```
50
126
51
127
Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
52
128
129
+
## How to avoid modifying global styles?
130
+
131
+
Currently ant-design-vue is designed as a whole experience and modify global styles (eg `body` etc).
132
+
If you need to integrate ant-design-vue as a part of an existing website, it's likely you want to prevent ant-design-vue to override global styles.
133
+
134
+
While there's no canonical way to do it, you can take one of the following paths :
135
+
136
+
### Configure webpack to load an alternale less file and scope global styles
137
+
138
+
It's possible to configure webpack to load an alternate less file:
139
+
140
+
```ts
141
+
new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') )
Where the src/myStylesReplacement.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector : the result is that all of the "global" styles are being applied with the #antd scope.
147
+
148
+
### Use a postcss processor to scope all styles
149
+
150
+
See an example of usage with gulp and [postcss-prefixwrap](https://github.com/dbtedman/postcss-prefixwrap) : https://gist.github.com/sbusch/a90eafaf5a5b61c6d6172da6ff76ddaa
151
+
152
+
## Not working?
153
+
154
+
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.
155
+
156
+
- 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.
157
+
- If you import styles from `'antd/dist/antd.css'`, change it to `antd/dist/antd.less`.
158
+
53
159
## Related Articles
54
160
55
161
-[How to Customize Ant Design with React & Webpack… the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f)
0 commit comments