Mit der grossen Menge von mächtigen und vielseitigen JavaScript Frameworks, wie React und Vue, die mit modernen Technologien und Workflows das Programmieren von statischen Webseiten, Single Page Apps (SPAs) und anderen Web-Formaten ermöglichen, entstand eine Lücke für weitere Frameworks die Verwendung dieser Tools zu vereinfachen.
Ein solches Framework is Nuxt.js, dass auf VueJS aufbaut und dessen Verwendung mit vorkonfigurierten Modulen strukturiert und vereinfacht. Mit dem Nuxt Kommandozeilen Programm ist das schnelle einrichten von Grundstrukturen eine Sache von Minuten. Zahlreiche beliebte Style-Frameworks wie Bootstrap und Bulma können dabei mit einem Befehl eingebunden werden.
Bulma Extensions
Sollen diese Style-Frameworks aber über den in der Standart Version enthaltenen Umfang erweitert werden, ist das oft etwas komplizierter. Wie solche Style Erweiterungen geladen werden können erklärt dieser Artikel am Beispiel von Bulma Extensions.
Einbinden mit NPM und SCSS
Die meisten Bulma Extensions stehen bereits als NPM Paket bereit, was die Installation und Einbindung in Nuxt deutlich vereinfach. Das benötige Packet für die gewünschte Extension muss dann einfach zur packages.json Datei hinzugefügt werden. Anschliessend können alle benötigten Informationen mit dem folgenden Befehl installiert werden:
npm install
Die Style Informationen sind nun installiert, müssen aber noch geladen werden bevor sie in einem Nuxt Projekt verwendet werden können. Das geschieht mit Hilfe von SCSS, dafür müssen wir index.scss als neue Datei im Ordner assets/sass des Nuxt Projekts erstellen.
In dieser Datei lade wir nun das Bulma Framework und unser frisch installiertes Extension Paket, das geht so:
@import './node_modules/bulma/bulma.sass';
@import './node_modules/EXTENSION ORDNER/src/sass/index.sass';
Wobei EXTENSION ORDNER natürlich mit dem Ordner Namen der gewünschten Extension ersetzt werden muss.
Im letzten Schritt konfigurieren wir Nuxt nun so, dass es die SCSS Datei einliest und die benötigten Styles lädt. Das passiert in der nuxt.config.js Datei im Hauptordner des Projekts, hier muss im css Block die erstellte index.scss eingebunden werden, etwa so:
css: ['@/assets/sass/index.scss'],
Und damit stehen alle Style-Element von Bulma und der gewählten Extension in jeder Seite und Komponente des Nuxt Projekts mit dem jeweiligen CSS Klassennamen zur verfügung.
Top comments (0)