Angular 9升级至18后LESS报错：无效类型操作

问题本质 #

报错Operation on an invalid type核心原因是LESS变量运算时类型不匹配，要么是变量未正确定义/导入，要么是Angular升级后LESS版本默认运算规则变更（从宽松的always改为严格模式）。仅4个文件触发错误，说明这几个文件对第三方包的引用逻辑存在异常。

排查与解决步骤 #

1. 正确配置LESS运算规则（替换index.html脚本配置） #

Angular项目中，index.html里的less = {math: 'always'}配置不会被webpack的less-loader识别，必须在angular.json里全局配置：
打开项目根目录的angular.json，找到对应项目的build.options节点，添加如下配置：

"stylePreprocessorOptions": {
  "lessOptions": {
    "math": "always"
  }
}

这个配置会让所有LESS文件的运算都按宽松规则解析，避免因版本变更导致的运算报错。

2. 检查报错文件的变量依赖逻辑 #

仅4个文件报错，重点排查这几个文件：

• 确认是否导入了第三方包依赖的变量文件：第三方包的lists.less用到的@padding-large-horizontal和@padding-small-vertical必须提前导入，且导入顺序要在lists.less之前。
• 检查是否存在变量重定义：若这几个文件里有同名变量被定义为非数值类型（比如字符串），会直接导致运算类型错误，需删除或修正本地重定义的变量。

3. 给第三方包打补丁（若配置调整无效） #

如果第三方包已停止维护，可临时修改其报错代码：
将第三方包lists.less中报错的行改为强制数值运算写法：

padding-left: (@padding-large-horizontal) - (@padding-small-vertical);

之后用patch-package工具固化修改，避免npm install后被覆盖：

1. 安装依赖：npm install patch-package --save-dev
2. 执行补丁命令：npx patch-package <第三方包名称>
3. 将生成的patches文件夹提交到代码仓库，其他开发者安装依赖时会自动应用补丁。

4. 验证LESS版本兼容性 #

Angular 18对less和less-loader版本有要求，版本不兼容也会引发解析错误，可重新安装适配版本：

npm uninstall less less-loader
npm install less@^4.2.0 less-loader@^11.1.0 --save-dev

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