Mehrere CSS Frameworks in einer Single Page Application mit AngularJS

In einer Single-Page Applikation werden die Stylesheets nur einmal geladen. Aber unterschiedliche Teile einer Applikation benötigen oft trotzdem ein unterschiedliches Design. Nachfolgend eine Lösung, welche ich nutzte, um unterschiedliche CSS Frameworks beim Laden der Applikation hinzuzufügen.

Als Beispiel drei verschiedene CSS Frameworks: Bootstrap, Materialize and Pure. Die einfachste Lösung wäre einfach alle Frameworks im Header zu laden, in etwa so:

In diesem Beispiel gewinnt die letzte Regel und wird alle vorherigen Regeln mit gleichem Selektor überschreiben. Das zerstört jedoch den spezifischen Look der einzelnen Frameworks.

Die Idee ist nun beim aufbauen der Seite alle Frameworks zu entfernen und dynamisch nur die benötigten überhaupt zu laden. Nachfolgendes Beispiel illustriert, wie das Ganze funktioniert.

Um das zu erreichen habe ich einen Service benutzt, der in der resolve-Funktion der Routen aufgerufen wird.

Der Service muss nur den Namen des Stylesheets und dessen Pfad kennen.All the service needs to know is the name of the stylesheet and it's path. The service then will add a new link node to the <head> of the DOM which represents the new stylesheet. This will immediately rerender the page using the new stylesheet.

Stylesheets mit Prefix

Leider löst die eben beschriebene Methode das Problem der Nutzung von unterschiedlichen Frameworks auf der selben Seite nicht. Dies kann nur erreicht werden, indem man die Stylesheets mit einem Prefix versetzt und die Elemente dann im Code mit der selben Klasse abgrenzt. Dazu nutze ich prefix-css, welches folgendermassen installiert werden kann:

npm install -g prefix-css

Danach reicht ein einfaches Kommando:

$ prefix-css .bootstrap bootstrap.min.css > bootstrap.prefixed.min.css

Wenn diese Technik nun mit vorhergehendem Vorschlag kombiniert wird, resultiert daraus das folgende Beispiel:

Bedenke, dass ein Stylesheet ohne Prefix alle anderen Elemente mit Prefix beeinflussen kann. Um dies zu vermeiden empfiehlt es sich nur solche mit Prefix zu benutzen. Dies kann das Aufbauen eines Layoutes jedoch stark erschweren.

Die Idee und ein Teil des Codes basieren auf folgendem Post.

Es existiert auch ein ausgereifter Service namens angular-css der direkt in eine AngularJS Applikation integriert werden kann.

June 21, 2015