umi 使用 less 变量定义主题色

umi 提供了主题变量替换的能力，只需要在配置文件中按照键值对形式进行替换，即可一键替换主题色。

但是，直接使用 js 来书写变量并不方便，且没有提示，因此使用lesss书写，并转为 js 文件

1. 书写 less

1	@primary-color: #78eaff;

2. 转换 less 为 js

在 src/theme文件夹下创建 variables.ts 文件。用 less-vars-to-js 包将 less 变量转为 js对象

1
2
3
4
5
6
7
8
9

import lessToJs from 'less-vars-to-js';
import path from 'path';
import fs from 'fs';

const themeVariables = lessToJs(
fs.readFileSync(path.join(__dirname, './theme.less'), 'utf8'),
);

export default themeVariables;

3. 引入变量

最后在 umi 的 config.ts 文件中引入

1
2
3
4
5
6
7

import theme from './src/theme/variables';

export default defineConfig({
// ...
theme,
// ...
});