Angular生产构建失败：Clean CSS错误求助

这个错误是clean-css在处理CSS源映射时触发的，核心原因是它尝试访问一个未定义的originalPosition对象，通常和CSS语法错误、源映射配置冲突或者依赖版本不兼容有关。下面是几个可行的解决方法：

• 临时禁用CSS源映射
  这是最快的临时解决方案，修改angular.json中的构建配置，关闭样式的源映射生成：

  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "sourceMap": {
              "scripts": true, // 可根据需求保留脚本源映射
              "styles": false,
              "vendor": true
            }
          }
        }
      }
    }
  }
  

  修改后运行ng build重新构建，应该能绕过这个错误。

• 排查CSS/SCSS语法错误
  很多时候这个错误是因为某个CSS/SCSS文件存在语法问题（比如未闭合的大括号、无效的嵌套选择器、错误的变量引用），导致clean-css解析时出错。建议：

  • 检查最近修改过的样式文件，逐段排查语法问题
  • 使用CSS校验工具（比如stylelint）扫描项目中的样式文件，找出潜在错误

• 更新依赖版本
  这个问题可能是clean-css和Angular CLI版本不兼容导致的，尝试更新相关依赖：

  1. 删除项目根目录下的node_modules文件夹和package-lock.json（或yarn.lock）
  2. 运行npm install @angular/cli@latest更新Angular CLI到最新兼容版本（如果你的项目版本较老，建议选择对应大版本的最新版，比如Angular 14.x的最新版）
  3. 重新运行npm install安装所有依赖

• 清理Angular构建缓存
  缓存的旧构建文件可能引发冲突，尝试清理缓存后重新构建：

  # Angular 12+版本
  ng cache clean
  # 或者手动删除缓存文件夹（Windows）
  rmdir /s /q .angular\cache
  # Linux/Mac
  rm -rf .angular/cache
  

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