How to lazy load global style?

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0 node: 6.9.2 os: win32 x64 @angular/animations: 4.0.1 @angular/common: 4.0.1 @angular/compiler: 4.0.1 @angular/core: 4.0.1 @angular/forms: 4.0.1 @angular/http: 4.0.1 @angular/platform-browser: 4.0.1 @angular/platform-browser-dynamic: 4.0.1 @angular/router: 4.0.1 @angular/upgrade: 4.0.1 @angular/cli: 1.0.0 @angular/compiler-cli: 4.0.1

Repro steps.

1. Read the following: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/global-styles.md
2. In my .angular-cli.json file, add the following to the styles array: “styles”: [ “scss/style.scss”, { “input”: “scss/style.client-1.scss”, “lazy”: true }, { “input”: “scss/style.client-2.scss”, “lazy”: true } ],
3. What is next step to load either of these styles at runtime?

Desired functionality.

I need to provide different global styles for certain customers to my website and once they login, override certain bootstrap variables (colors, logo, etc). I have defined some client specific SCSS files and marked them as lazy load in the styles array.

Now I need to load them…help!

Docs in the link below mention “You can also rename the output and lazy load it by using the object format” - so how do I load them?

Mention any other details that might be useful.

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/global-styles.md

[aaronfrost]

I don’t know why this was closed. The question still very much remains.

When I lazy load a css file, the production build process output includes a chuck hash that I can’t know, making it impossible to know in my code the name of the file. Let me show. If I add the following to my angular-cli.json:

    "styles" : [
        { "input" : "foo.css", "lazy" : true }
    ]

then the build will output a file called foo.<some random hash>.bundle.js.

Because the file name is generated and not static, I can’t lazy load it. How do I get either the name to be static… or what is the prescribed way to do this by the Angular CLI team? I have the ability to create the lazy css file. How do I use it?

@filipesilva ^^^

[sumitarora]

Closing as above.