Umi4+React项目：使用less全局变量(利用lessLoader配置项)

之前写的文章，使用起来过于麻烦Umi4+React:使用less全局变量

项目安装依赖

pnpm install less less-loader

export default {
  npmClient: 'pnpm',
  lessLoader: {
    modifyVars: {
      // ten: '100px'
      hack: 'true; @import "@/assets/css/variables.less";',
    }
  },

};

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>
  );
}

.box-test {
  background-color: @theme-color;
  height: @ten;
  width: @max-width;
}