src\assets\css\variables.less
@theme-color: blue;
@max-width: 600px;
@small-height: 300px;
src\pages\index.tsx
import yayJpg from '../assets/yay.jpg';
import './index.less';
export default function HomePage() {
return (
<div>
<h2>Yay! Welcome to umi!</h2>
<p>
<img src={yayJpg} width="388" />
</p>
<p>
To get started, edit <code>pages/index.tsx</code> and save to reload.
</p>
<div className='box-test'>
jjjjjj
</div>
</div>
);
}
src\pages\index.less
@import '../assets/css/variables.less';
.box-test {
background-color: @theme-color;
height: @small-height;
width: @max-width;
}