Читать книгу Angular - Ferdinand Malcher - Страница 123

CSS-Stylesheets können ebenso über eine @import-Regel in das Projekt eingefügt werden. Dafür muss lediglich die folgende Zeile in das CSS-Stylesheet src/styles.css aufgenommen werden:

@import '~semantic-ui-css/semantic.css';

Die Tilde (~) wird beim Build automatisch durch den Pfad zum Verzeichnis node_modules ersetzt.^a Zusammen mit einem Präprozessor wie Sass oder Less hat der Weg mit dem Import den Vorteil, dass wir die Variablendeklarationen aus dem Stylesheet selbst nutzen und verändern können, um z. B. eigene Einstellungen in unserem Projekt zu setzen.

^a Hinter den Kulissen nutzt Angular dafür einen Webpack-Alias.

Als Test, ob Semantic UI erfolgreich eingebunden wurde, fügen wir direkt das erste UI-Element aus dem Framework ein. Wir wollen eine rotierende Ladeanzeige einblenden, solange die Angular-Anwendung geladen wird. So eine Ladeanzeige platzieren wir in der index.html innerhalb des Host-Elements für die AppComponent, hier <bm-root>:

<bm-root>

<div class="ui active inverted dimmer">

<div class="ui text loader large">Lade BookMonkey...</div>

</div>

</bm-root>