Angular项目用Less配置ngx-charts暗色主题时出现变量未找到编译报错

构建失败和IDE报错的核心原因是混淆了Less与SCSS的变量语法规范：

• SCSS/Sass 体系下的变量以$为前缀，标准写法为$变量名: 变量值
• Less 体系的变量必须以@为前缀，对$开头的定义完全无法识别，这就是构建日志里抛出Unrecognised input的直接来源。
  从报错堆栈可以看到，解析指针指向的第一行$color-bg-darkest: #13141b;就是触发解析中断的位置——Less解析器遇到不符合语法规则的输入会直接终止流程，后续IDE提示的「Cannot find variable 'color-bg-darker'」是解析失败带来的连锁报错，不是变量定义位置的问题。

具体修复操作 #

• 第一类修改：替换所有变量定义的前缀
  把.dark选择器块内所有以$开头的变量定义，全部替换为@开头的合法Less写法：
  错误写法（SCSS语法，无法被Less解析）：

  $color-bg-darkest: #13141b;
  $color-bg-darker: #1b1e27;
  $color-bg-dark: #232837;
  $color-bg-med: #2f3646;
  $color-bg-light: #455066;
  $color-bg-lighter: #5b6882;
  
  $color-text-dark: #72809b;
  $color-text-med-dark: #919db5;
  $color-text-med: #A0AABE;
  $color-text-med-light: #d9dce1;
  $color-text-light: #f0f1f6;
  $color-text-lighter: #fff;
  

  修正后的正确写法：

  @color-bg-darkest: #13141b;
  @color-bg-darker: #1b1e27;
  @color-bg-dark: #232837;
  @color-bg-med: #2f3646;
  @color-bg-light: #455066;
  @color-bg-lighter: #5b6882;
  
  @color-text-dark: #72809b;
  @color-text-med-dark: #919db5;
  @color-text-med: #A0AABE;
  @color-text-med-light: #d9dce1;
  @color-text-light: #f0f1f6;
  @color-text-lighter: #fff;
  

• 第二类修改：替换所有变量引用的前缀
  把代码块内所有引用这些色值变量的位置的$同步替换为@，比如：
  • 原写法background: $color-bg-darker; 改为 background: @color-bg-darker;
  • .ngx-charts、.chart-legend等所有嵌套子选择器里的变量引用（如fill: $color-text-med;、stroke: $color-bg-med;）全部同步替换

补充说明 #

• 你当前把变量定义在.dark选择器根节点的写法本身符合Less的作用域规则：定义在父选择器内的变量，可以被所有嵌套在内部的子选择器正常引用，不需要将变量提到全局文件层级。
• 你代码里其余的选择器嵌套、伪类写法（&:hover）、rgba色值等语法，都是Less原生兼容的，不需要额外调整。

内容的提问来源于stack exchange，提问作者Owen Kelvin