umi 中 引入 npm 包 less 变量

umi 中 引入 npm 包 less 变量

问题描述

最近开发组件库，组件库中有色彩系统，需要在项目中引用，此处记录解决方案

解决方案

• 方案一： 在 less 中引入，如下：需要每个 less 文件中引用，所以舍弃

@import "~@homed/mortise-ui/es/components/style/themes-override/color.less"; // 引入 mortise 色彩体系

• 方式二： 将 less 转换为 js 文件，通过修改 umi 的配置 theme 字段实现，比较繁琐；参考：直达链接
• 方式三： 配置 lessLoader，一劳永逸，采用此方案

lessLoader: {
    modifyVars: {
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: 'true; @import "~@homed/mortise-ui/es/components/style/themes-override/color.less";',
    },
},