使用 Angular CLI 延迟加载应用程序主题样式 [英] Lazy load application theme styles with Angular CLI

问题描述

我正在尝试切换 <link/> 的 href 以实现主题化，并且 SCSS 主题位于我的 monorepo 的包文件夹中，这些文件夹是符号链接的在 node_modules 中.我需要能够编译和引用这些.

I am trying to switch the href of a <link /> for theming purposes and the SCSS themes live in a packages folder of my monorepo that are symlinked in node_modules. I need to be able to compile and reference these.

我遇到了以下已解决的问题:angular/angular-cli#3401 并且一直在尝试实现类似的东西:

I came across the following fixed issue: angular/angular-cli#3401 and have been trying to implement something similar:

"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 但它是没有按预期工作.我是误解了什么还是这样做完全错误?

My understanding (perhaps incorrect) was that this would compile the dark.scss file into dist/dark.bundle.css and that I would be able to load it via http://localhost:4200/dist/dark.bundle.css but it is not working as expected. Am I misunderstanding something or doing this completely wrong?

如何从 node_modules 编译一个 SCSS 文件，然后我可以在应用程序中延迟加载它?我可以尝试其他/更好的方法吗?

How do I compile an SCSS file from node_modules that I can then lazy load in the app? Is there another/better approach I could try instead?

附加说明:

• 使用 Angular 版本 4.2.4
• 使用 Angular CLI 版本 1.3.0
• 此方法的文档
• 我在 monorepo 工作，所以 node_modules/@org/themes 是一个符号链接
• 我曾尝试使用 ng serve --preserve-symlinks 选项以防上述问题.没什么区别

• Using Angular version 4.2.4
• Using Angular CLI version 1.3.0
• The documentation for this approach
• I am working in a monorepo so node_modules/@org/themes is a symlink
• I have tried using ng serve --preserve-symlinks option in case the above was the issue. It made no difference

我研究了 Angular Materialdocs 网站解决了这个问题，似乎他们有一个自定义构建脚本，可以在为应用程序提供服务之前将 SCSS 文件编译为 assets 目录中的 CSS 文件.我认为上面的固定问题消除了这一步的需要，但也许不是.这是唯一的方法吗?

I have looked into the way that the Angular Material docs website approaches this problem and it seems they have a custom build script that compiles the SCSS files to CSS files in the assets directory before serving the application. I thought the fixed issue above removed the need for this step but perhaps not. Is this the only way it can be done?

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

Thanks to @Kuncevic. I was missing the --extract-css flag.

工作配置:

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

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

And with the following serve script, I can access it via http://localhost:4200/themes/dark.bundle.css:

ng serve --extract-css --preserve-symlinks

推荐答案

通过设置 "lazy": true 意味着它不会出现在 index.html 但有没有机制可以为您延迟加载该包，请检查 评论:

By setting "lazy": true means it won't appear in index.html but there is no mechanism that will lazy load that bundle for you, check that comment:

lazy 选项实际上不会延迟加载任何东西.它只是防止它不会在应用程序启动时执行.

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

我同意 "lazy": true 一开始有点令人困惑.

I agree "lazy": true is a bit confusing at first.

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

If you run ng build you can actually see what's gets outputed in your build and analyze all the files produced by cli.

当你这样做时:

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

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

You should be able to access your file directly at http://localhost:4200/dark.bundle.js but it wont appear in index.html as you set "lazy": true

如果你想获得 dark.bundle.css 包而不是dark.bundle.js 在开发模式下你可以使用 --extract-css 标志.

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

之所以在开发模式下将样式生成到 js 包中，是因为这种方式要快得多.Bud 当你像 ng buld --prod 那样做 prod 构建时，它会默认输出到 .css 中.

The reason why cli generating styles in to js bundle in dev mode is because this way is much quicker. Bud when you do prod build like ng buld --prod it will output in to .css by default anyway.

这篇关于使用 Angular CLI 延迟加载应用程序主题样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！