umi 4 踩坑

1. route结合layout布局，头部会重复显示

umi4 layout 重复输出 html 结构 #10392 别人也遇到了这种情况，下面是正确的代码

const routes = [
  {
    path: '/login',
    component: '@/pages/login',
    layout: false,
  },
  {
    path: '/',
    component: '@/layouts',
    layout: false,
    wrappers: ['@/wrappers/auth'],
    routes: [
      { path: '/', redirect: '/knowledge' },
      {
        path: '/knowledge',
        component: '@/pages/knowledge',
      },
    ],
  },
  {
    path: '/*',
    component: '@/pages/404',
    layout: false,
  },
];

结合下面的回答
跟官方文档，在component: '@/layouts',层面设置layout:false解决了问题，如下

2. 全局配置less文件，且让vscode可以提示less变量

如何配置全局less变量文件？ #4131 有详细的配置，在.umirc做如下配置，其他less文件就可以使用公共的变量啦。

  lessLoader: {
    modifyVars: {
      hack: `true; @import "~@/less/variable.less";`,
    },
  },

这还不够，输入的时候vscode没法提示变量名，这时候Less IntelliSense出现啦，可以愉快的引用公共less变量了，对mixin也支持的。当然不做全局配置，直接在less文件@import '~@/less/variable.less';也是可行的，全局配置就是不用每次在less文件中引入。