sass - 自定义 Ant Design 主题

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 样式变量。