umi 提供了主题变量替换的能力,只需要在配置文件中按照键值对形式进行替换,即可一键替换主题色。
但是,直接使用 js 来书写变量并不方便,且没有提示,因此使用lesss书写,并转为 js 文件
1. 书写 less
@primary-color: #78eaff;
2. 转换 less 为 js
在 src/theme
文件夹下创建 variables.ts
文件。用 less-vars-to-js
包将 less 变量转为 js对象
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
文件中引入
import theme from './src/theme/variables';
export default defineConfig({
// ...
theme,
// ...
});