Angular CLI：在 Sass 编译时注入 css 而无需完全重新加载？答案

【问题标题】：Angular CLI: Inject css on Sass compile without full reload?Angular CLI：在 Sass 编译时注入 css 而无需完全重新加载？
【发布时间】：2017-11-15 11:34:57
【问题描述】：

我们使用 Angular cli 搭建了 Angular 4 应用程序，使用 scss 作为默认样式。我们使用

运行应用程序

ng serve --sourcemap --extractCss -o

获取 scss 源映射。这工作正常，应用程序编译、运行、源映射工作等。

但是，来自 Angular1/Gulp/Browsersync 世界，我错过了在没有重新加载整个页面的情况下注入构建的 css。目前，每当我编辑 sass 文件时，webpack 都会在 Chrome 中编译并重新加载页面。

这是现在唯一的工作方式吗？有没有办法在不重新加载的情况下简单地强制刷新 CSS（就像 Gulp 时代的 browsersync 那样）？

【问题讨论】：

是的，这确实很烦人。对此有何更新？我正在使用 Angular 7，如果有办法解决这个问题，我会很高兴。

标签： css angular webpack angular-cli browser-sync

【解决方案1】：

这与 CSS 注入并不完全相同，但会使您的页面重新加载和编译速度快得多！

使用 Angular 7，您可以关注 this guide 以启用 HMR。（模块热更换）

它还可以非常快速地重新加载您的 .ts 文件！

小附录：

我认为您实际上可以加载通过注入更改的 CSS，但遵循 HMR documentation 的这段代码

【讨论】：