Angular项目中::ng-deep SCSS指令突然失效问题求助

问题背景 #

项目仓库：https://github.com/edissyum/opencapture/
昨日项目所有功能正常，今日发现所有::ng-deep SCSS指令失效，具体表现：

• 此前dev_v2分支构建后样式正常，今日拉取该分支执行build-watch或build-prod后，::ng-deep完全失效；
• dev_nch分支中通知服务背景应为白色，实际显示黑色；
  已尝试回退package.json至旧版本、更换不同npm/node版本的电脑编译，问题仍未解决。

排查步骤 #

• 检查Angular CLI版本一致性
  执行ng version查看本地CLI版本，确认是否和昨日使用版本一致。Angular部分版本更新会调整::ng-deep的解析规则，若CLI意外升级，尝试锁定到昨日使用的版本。

• 排查全局样式/第三方样式污染
  通过浏览器开发者工具查看目标元素的样式优先级，确认是否有更高权重的全局样式或第三方依赖样式覆盖了::ng-deep指定的规则。重点排查近期新增的全局SCSS文件、第三方依赖版本变更。

• 检查组件视图封装模式
  查看组件的encapsulation配置，确认是否被修改为ViewEncapsulation.None或ViewEncapsulation.ShadowDom——这两种模式会干扰::ng-deep的生效逻辑，确保组件使用默认的ViewEncapsulation.Emulated。

• 验证SCSS编译配置
  检查angular.json中的styles配置项，确认是否新增了编译参数、调整了样式文件顺序，或stylePreprocessorOptions中的配置变更导致::ng-deep解析异常。

• 彻底清理缓存
  执行以下命令清理npm和Angular构建缓存，避免缓存残留导致的异常：

  npm cache clean --force
  rm -rf node_modules
  rm package-lock.json
  npm install
  ng clean
  

  清理完成后重新执行构建命令。

• 对比分支代码差异
  对比dev_v2分支昨日正常版本与今日拉取版本的代码差异，重点关注：

  • 根组件/全局样式文件的修改；
  • angular.json、tsconfig.json等配置文件的变更；
  • 第三方依赖锁文件（package-lock.json/yarn.lock）的版本差异。

• 检查::ng-deep语法正确性
  排查所有使用::ng-deep的SCSS代码，确认是否存在嵌套规则错误、选择器拼写错误等语法问题——这类错误可能导致整个样式块失效。

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