Angular CLI CSS注入而不是重新加载

时间:2018-07-10 17:53:47

标签: angular angular-cli

当我运行ng serve时,如果对.scss文件进行了更改,则会导致页面重新加载。这很不方便,并且可能会丢失某些状态或开发工具更改。

通常,当我从事设计工作时,我会使用诸如browsersyc之类的东西注入css,而不刷新页面。当我不得不调试一些棘手的东西时,这为我节省了大量时间。

反正有没有获取角度cli来注入.scss更改或重新加载页面的方法?

编辑:

从webpack文档中:

  

HMR是一项可选功能,仅会影响包含HMR代码的模块。一个示例是通过样式加载器修补样式。为了使修补工作正常进行,样式加载器实现了HMR接口。当通过HMR收到更新时,它将用新样式替换旧样式。

     

类似地,在模块中实现HMR接口时,您可以描述更新模块时应该发生的情况。但是,在大多数情况下,并非必须在每个模块中都编写HMR代码。如果模块没有HMR处理程序,则更新冒泡。这意味着单个处理程序可以更新完整的模块树。如果更新树中的单个模块,则会重新加载整个依赖项集。

据我所知,Angular-CLI支持HMR,但是我找不到有关它的任何官方文档。

是否可以在Angular 6中实现样式加载器?

1 个答案:

答案 0 :(得分:2)

使用Angular 7,您可以按照this guide启用HMR。 (热模块更换)

它与CSS注入不同,但是比完全重新加载和编译要快得多。

很棒的是,它也可以用于您的ts文件。


小附录:

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