antd 定制样式

准备

less版本:

1
"less": "2.7.2", less:3.0有bug

要编译的文件:

1
// theme.less
2
3
// 由于antd内部使用了utf8编码的文字符号而不是使用\u****的Unicode码点表示
4
// 在cdn样式文件返回头里没有明确指明utf-8时,可能存在文字符号乱码的可能
5
// 编译生成过程中通过css-loader也会自动转换,而本文场景是直接编译
6
// 所以,为了安全起见,最好指定编码格式
7
@charset "utf-8";
8
9
@import "../node_modules/antd/dist/antd.less";
10
11
// 覆盖变量定义
12
// 所有变量详见 https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
13
14
@primary-color: #F15B41;

编译命令:

1
n// theme.less
2
3
// 由于antd内部使用了utf8编码的文字符号而不是使用\u****的Unicode码点表示
4
// 在cdn样式文件返回头里没有明确指明utf-8时,可能存在文字符号乱码的可能
5
// 编译生成过程中通过css-loader也会自动转换,而本文场景是直接编译
6
// 所以,为了安全起见,最好指定编码格式
7
@charset "utf-8";
8
9
@import "../node_modules/antd/dist/antd.less";
10
11
// 覆盖变量定义
12
// 所有变量详见 https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
13
14
@primary-color: #F15B41;

参考:

web局部(antd)主题方案演进