Angular开发如何关闭自动页面重载 仅更新SCSS编译与UI？

Angular CLI 原生的ng serve默认热重载逻辑会在检测到任意文件变更时触发整页刷新，针对仅修改SCSS需要局部更新的需求，可通过以下两种方案实现：

方案1：开启官方原生HMR（热模块替换） #

这是最简便的官方原生支持方案，适配绝大多数常规项目：

• 启动开发服务时直接传入HMR参数，命令为：ng serve --hmr
• 如需永久配置，可在项目根目录的angular.json中找到对应项目的配置节点：architect > serve > configurations > development，添加"hmr": true配置项，之后直接执行ng serve即可自动生效
• 注意：Angular 11及以上版本原生内置HMR支持，无需额外安装第三方依赖，低于该版本的项目建议先升级Angular CLI版本后使用

配置生效后，修改SCSS文件保存时，只会替换对应样式模块，不会触发整页重载，页面当前的交互状态（如表单填写内容、已展开的弹窗等）均会保留。

方案2：调整样式加载配置（适配自定义项目结构） #

如果你的项目存在自定义多样式入口、自定义CSS预处理规则等特殊配置，HMR不生效时可以调整如下配置：

• 不要使用--live-reload false参数，该参数会禁用所有自动刷新逻辑，完全不符合需求
• Angular 12以下版本：在angular.json的architect > build > configurations > development节点下，将"extractCss": true改为"extractCss": false，开发环境下不会将样式提取为独立CSS文件，而是通过注入的方式插入页面，修改时可直接替换
• Angular 12及以上版本：确认开发环境配置中没有开启"extractStyles": true，默认情况下开发环境不会提取独立样式，无需额外调整
• 检查SCSS文件中是否引入了非样式资源（如在SCSS中import了TS/JS文件、调用require加载脚本资源），这类引用会被识别为脚本模块变更，触发整页重载，将非样式引用移到对应TS文件中即可

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