使用Angular CLI延迟加载应用程序主题样式

我正在尝试切换< link />的href.出于主题目的,SCSS主题位于我的monorepo的packages文件夹中,这些文件夹在node_modules中进行符号链接.我需要能够编译和引用这些.

我遇到了以下固定问题：angular/angular-cli#3401并且一直试图实现类似的东西：

"styles": [
    "styles.scss",{
        "input": "../node_modules/@org/themes/dark.scss","output": "dark","lazy": true
    }
],

我的理解(也许是不正确的)是这会将dark.scss文件编译成dist / dark.bundle.css并且我可以通过http://localhost:4200/dist/dark.bundle.css加载它但是它没有按预期工作.我误解了某些事情或完全错误吗？

如何编译node_modules中的SCSS文件,然后我可以在应用程序中延迟加载？我可以尝试另一种/更好的方法吗？

补充说明：

>使用Angular版本4.2.4
>使用Angular CLI 1.3.0版
> documentation for this approach
>我在monorepo工作,所以node_modules / @ org / themes是一个符号链接
>我已尝试使用ng serve –preserve-symlinks选项,以防出现上述问题.它没有任何区别

我已经调查了Angular Material docs website approaches this problem的方式,看起来他们有一个自定义构建脚本,在服务应用程序之前将SCSS文件编译为assets目录中的CSS文件.我认为上面修复的问题消除了对这一步的需要,但也许没有.这是唯一可行的方法吗？

解决了

感谢@Kuncevic.我错过了–extract-css标志.

工作配置：

"styles": [
    "styles.scss",{
        "input": "../node_modules/@org/themes/src/dark.scss","output": "themes/dark",

使用以下服务脚本,我可以通过http://localhost:4200/themes/dark.bundle.css访问它：

ng serve –extract-css –preserve-symlinks

通过设置“lazy”：true意味着它不会出现在index.html中,但是没有机制可以为您延迟加载该捆绑包,请检查 comment：

The lazy option doesn’t actually lazy load anything. It just prevents
it from being executed on application startup.

我同意“懒惰”：真的有点令人困惑.

如果您运行ng build,您实际上可以看到在构建中输出的内容并分析cli生成的所有文件.

当你这样做时：

{
    "input": "../node_modules/@org/themes/dark.scss","lazy": true
}

您应该能够直接在http://localhost:4200/dark.bundle.js访问您的文件,但它不会出现在index.html中,因为您设置了“lazy”：true

If you want to get dark.bundle.css bundle instead of
dark.bundle.js in dev mode you can use --extract-css flag.

cli在开发模式下生成样式到js包的原因是因为这种方式更快.当你按照ng buld -prod生成prod时,它会默认输出到.css.

使用Angular CLI延迟加载应用程序主题样式

猜你在找的Angularjs相关文章