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

问题描述

我正在尝试出于主题目的切换<link />的href，并且SCSS主题位于我的monorepo的packages文件夹中，该文件夹在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，并且我可以通过

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

我研究了角度材料的方式docs网站解决了这个问题，似乎他们有一个自定义的生成脚本，该脚本在将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 ，但在您设置"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.

在开发人员模式下cli在js包中生成样式的原因是因为这种方式要快得多.当您执行像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屋！