第一种方法,不使用插件,直接直接theme配置,然后即可直接在less文件中使用在此定义 的变量。
https://v3.umijs.org/zh-CN/config#theme
export default {
theme: {
'@primary-color': '#1DA57A',
},
};
第二种使用less-vars-to-js,将less文件转化为js对象
src\assets\css\index.less
@theme-color: '#888';
src\theme\variables.ts
import lessToJs from 'less-vars-to-js';
import path from 'path';
import fs from 'fs';
const themeVariables = lessToJs(
fs.readFileSync(path.join(__dirname, '../assets/css/index.less'), 'utf8'),
);
console.log('themeVariables',themeVariables);
export default themeVariables;
.umirc.ts
import { defineConfig } from 'umi';
import theme from './src/theme/variables';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
fastRefresh: {},
title: 'umi3+React-自学项目',
metas: [
{
name: 'description',
content: 'jishuuuu。',
}, {
name: 'keywords',
content: 'umi, umijs',
},
{
name: 'roots',
content: 'umi, umijs',
}
],
// ssr:{}
theme: theme,
});
应用
src\pages\NoteBook\index.tsx
import './index.less';
export default function NoteBook() {
const goPage = (url) => {
const element = document.createElement('a');
element.href = url
element.target = '_blank'
element.click()
}
return (
<>
hello
<button onClick={() => {
goPage('//baidu.com')
}}>点击跳转</button>
<br />
<div className="box-note-book">
helllo
</div>
</>
)
}
src\pages\NoteBook\index.less
.box-note-book {
height: 200px;
width: 300px;
background-color: @theme-color;
}