Angular8项目升级Angular CLI至9版本后遇less-loader构建报错求助

我帮你分析下这个报错——你从Angular CLI 1.7.4升级到9之后遇到的less-loader构建错误，主要是路径配置格式错误和依赖版本不兼容导致的。下面是一步步的解决方法：

1. 修正modifyVars里的错误路径配置 #

从报错信息里能明显看到，less-loader的modifyVars参数有语法混乱：

{"sourceMap":true,"modifyVars":{"root":"/"~@angular/../../"","styles":"/"~@angular/../../app/assets/less /""}}

这里的引号嵌套完全错误，路径写法也不符合规范。你需要打开angular.json，找到对应的less配置项（一般在build.options.lessLoaderOptions里），把modifyVars改成正确的相对路径：

"lessLoaderOptions": {
  "sourceMap": true,
  "modifyVars": {
    "root": "./", // 指向项目根目录
    "styles": "./app/assets/less/" // 你的less文件存放目录
  }
}

如果项目里没有显式配置lessLoaderOptions，那大概率是CLI升级时自动转换配置出了问题，直接添加这段正确配置即可。

2. 安装与Angular 9兼容的less-loader版本 #

Angular 9使用的webpack版本是4.x，旧版本的less-loader可能和它不兼容。推荐安装适配的稳定版本：

# 先卸载旧版本
npm uninstall less-loader
# 安装兼容的版本组合
npm install --save-dev less-loader@7.3.0 less@3.12.2

less-loader@7.x是和Angular 9匹配的稳定版本，搭配less@3.x使用不会出现兼容性冲突。

3. 清理缓存并重新安装依赖 #

升级依赖后，一定要清理残留的缓存和旧依赖，避免干扰新配置：

# 删除旧依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装所有依赖
npm install
# 清理Angular本地缓存
ng cache clean
# 重新构建项目
ng build

4. 检查styles数组的路径配置 #

最后，确认angular.json里build.options.styles数组中的路径没有错误，比如：

"styles": [
  "./app/assets/less/bootstrap/input-groups.less",
  // 其他你的样式文件
]

确保路径是正确的相对路径，没有多余的空格或引号。

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