Ant Design 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量。我们可以通过覆盖这些变量达到自定义主题的目的。antd官网针对使用less的项目提供了自定义主题的方案，那么使用sass语言的项目怎么自定义主题呢？
1. 定义样式变量文件ant.var.scss
定义样式变量文件ant.var.scss,在里面写入我们要覆盖的样式变量。比如：
$primary-color: #2a83fd; // 全局主色
// 字体颜色
$text-color: #b2d6ff; // 主文本色
$text-color-secondary: #fff; // 次文本色
// 字体大小
$font-size-base: 0.14rem;
// 行高
$line-height-base: 1.5715;
// 高度
$height-base: 0.32rem;
// 边框
$border-width-base: 0.01rem;
$border-radius-base: 0.02rem;
antd 的样式变量有很多，根据自己需要覆盖即可。所有的样式变量参考https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
2. 定义主题样式文件 theme.less
// 用自定义样式覆盖antd样式
@import '~antd/dist/antd.less';
@import './antd.var.scss';
3. 定义文件 sassVarsToLess.js
定义文件 sassVarsToLess.js,用来将 sass 变量翻译成 less 变量,具体代码如下：
module.exports = function (source) {
return source.replace(/\$/gi, '@');
};
4. 在 webpack 中配置
{
test: /\.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{
loader: "less-loader",
options: {
javascriptEnabled: true
}
}
]
},
{
test: /\.scss$/,
issuer: {
exclude: /\.less$/,
},
// ...
},
{
test: /\.scss$/,
issuer: /\.less$/,
use: {
loader: './sassVarsToLess.js'
}
},
5. babel 配置
{
"presets": [
// ...
],
"plugins": [
// ...
["import", {
"libraryName": "antd",
"libraryDirectory": "lib"
}]
]
}
至此，我们便完成了通过自定义样式变量文件ant.var.scss,来覆盖默认的 Ant Design 样式变量。
