Aurelia - Laden Sie eine CSS-Datei pro Seite/Scoped CSS

Question

Ich habe mehrere Seiten und ich möchte verschiedene CSS-Dateien für jede Seite laden.

Etwas wie folgt aus:

status.html

<template> 
    <require from="./css/modules/status.css"></require> 
</template> 

cms.html

<template> 
    <require from="./css/modules/cms.css"></require> 
</template> 

Aber das funktioniert nicht richtig. Auf der Statusseite lade ich nur die status.css Datei, aber wenn ich die cms Seite öffne, habe ich die status.css und es wird cms.css geladen.

Answer 1

So funktioniert Aurelias faules Laden von Ressourcen. Wenn eine Ansicht geladen wird, werden die CSS-Dateien, die sie benötigt, in die Seite geladen und bleiben dort, auch wenn Sie zu einer anderen Ansicht wechseln.

Was Sie suchen, ist eine Funktion, die in ShadowDOM existiert, aber der einzige Browser, der dies im Moment unterstützt, ist Chrome AFAIK.

wurde Die andere Option CSS scoped, aber es sieht so aus, dass abgebrochen worden ist: http://caniuse.com/#feat=style-scoped

könnte dieses Problem für Sie von Interesse sein: https://github.com/aurelia/framework/issues/234

Für Vollständigkeit halber gibt tatsächlich einen oldschool Weg, : https://css-tricks.com/saving-the-day-with-scoped-css/