[Angular] Lazy Load CSS at runtime with the Angular CLI
<p>Ever had the need for multiple "app themes", or even to completely dynamically load CSS based on which customer logs into your application? You could of course bundle all of the various themes into a single CSS entry file, but your application size would suffer a lot. Therefore, in this lesson we're going to have a look how to define multiple entry-level CSS files and how to "lazy load" them at runtime.</p><p> </p>
<p>Source: https://egghead.io/lessons/angular-lazy-load-css-at-runtime-with-the-angular-cli</p>
<p> </p>
<p>For example we want to lazy load two theme file: 'client-a-style.scss', 'client-b-style.scss':</p>
<p>In angular.json:</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/dyncss",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": ["src/favicon.ico", "src/assets"],
<strong><span style="color: rgba(255, 0, 255, 1); background-color: rgba(255, 255, 0, 1)">"extractCss": true,</span></strong>
"styles": [
"src/styles.scss",
<span style="color: rgba(255, 0, 255, 1)"><strong><span style="background-color: rgba(255, 255, 0, 1)">{
"input": "src/client-a-styles.scss",
"bundleName": "client-a",
"inject": false
},
{
"input": "src/client-b-styles.scss",
"bundleName": "client-b",
"inject": false
}</span></strong></span>
],
"scripts": []
},
</pre>
</div>
<p> </p>
<p>After you do `ng build --prod`, it will generate two css files: 'client-a.css' and 'client-b.css'.</p>
<p>Then we can do lazy load when button click:</p>
<div class="cnblogs_Highlighter">
<pre class="brush:java;gutter:true;">import { Component, Inject, Renderer2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'dyncss';
// reference document
constructor(@Inject(DOCUMENT) private document: Document) {}
loadStyle(styleName: string) {
// get head
const head = this.document.getElementsByTagName('head');
// create link tag to load css
let themeLink = this.document.getElementById(
'client-theme'
) as HTMLLinkElement;
if (themeLink) {
// if the link is already exist, we just replace the link source
themeLink.href = styleName;
} else {
// if link doesn't exist, we create link tag
const style = this.document.createElement('link');
style.id = 'client-theme';
style.rel = 'stylesheet';
style.href = `${styleName}`;
head.appendChild(style);
}
}
}
</pre>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><button type="button" (click)="loadStyle('client-a.css')">
Load client style a
</button>
<button type="button" (click)="loadStyle('client-b.css')">
Load client style b
</button>
</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/Answer1215/p/11395027.html
頁:
[1]