Angular项目全局style.scss修改后浏览器不生效问题求助

• 核对文件路径与编码
  确认src/styles.scss的路径和angular.json中styles数组的配置完全一致，无拼写错误。同时检查文件编码为UTF-8，避免特殊字符导致编译时被忽略。

• 清理Angular CLI缓存
  仅清理浏览器缓存不够，需清理Angular CLI本地缓存，执行以下命令：

  ng cache clean
  

  手动删除node_modules/.cache目录（若存在），再重启项目。

• 验证编译输出结果
  手动执行一次开发环境构建：

  ng build --configuration development
  

  查看dist/position-web目录下生成的styles.*.css文件，确认新增样式是否存在。如果文件里有新增代码，说明问题出在浏览器缓存（可尝试强制刷新：Ctrl+Shift+R）或dev-server热更新；如果没有，说明编译过程未读取到style.scss的修改。

• 排查SCSS语法错误
  若style.scss存在语法错误（如未闭合的括号、错误嵌套、无效变量），Angular编译可能跳过部分或整个文件。可注释掉新增代码，逐行恢复排查错误点，或用SCSS校验工具检查语法。

• 确认angular.json配置一致性
  检查build的configurations节点下，development和production配置是否都包含src/styles.scss，避免某环境单独覆盖了styles配置。

• 检查样式优先级冲突
  组件样式可能通过更具体的选择器或!important覆盖了全局样式。在浏览器开发者工具中查看元素的样式面板，确认全局样式是否被标记为失效（划横线）。

• 重启开发环境与IDE
  部分情况下IDE的文件监听机制异常，导致Angular CLI未检测到style.scss的修改。关闭终端和IDE，重新打开后启动项目。

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