Ich habe den ganzen Nachmittag versucht, meine benutzerdefinierten Stylesheets und JavaScripts in eine neue Drupal-8-Site einzubinden, aber ohne Erfolg. Es gibt zahlreiche Anleitungen im Internet, die erklären, wie man benutzerdefinierte CSS- und JS-Dateien in Drupal 8 einbindet, aber keine davon schien bei mir zu funktionieren. Offensichtlich fehlte mir nur ein kleines Detail. Deshalb möchte ich Ihnen zeigen, wie Sie Ihre eigenen Stylesheets und JavaScripts einbinden, die auf jeder Seite Ihrer Drupal-8-Site geladen werden.
Für dieses Projekt verwende ich ein adaptives Theme, das jedoch grundsätzlich nicht vom Basis-Theme abhängig ist.
So fügen Sie Ihre CSS- und/oder JS-Dateien hinzu:
- Erstellen Sie die neuen Stylesheets und JavaScripts in einem Unterordner Ihres Themes.
- Definieren Sie eine neue Bibliothek in Ihrem Theme: yourthemename.libraries.yml
- Fügen Sie einen Verweis auf Ihre neue Bibliothek in yourthemes: yourthemename.info.yml hinzu.
Sehen wir uns ein Beispiel an: Wir fügen mystylesheet.css und myscript.js zu unserem Theme hinzu und laden es auf jeder Seite dieser Website. Unser Theme-Verzeichnis heißt yourthemename.
- Erstellen Sie die Datei public_html/themes/yourtheme/styles/css/mystylesheet.css.
- Erstellen Sie die Datei public_html/themes/yourtheme/scripts/myscript.js.
- Definieren Sie eine neue Bibliothek namens global-styling in public_html/themes/yourtheme/yourtheme.libraries.yml und fügen Sie folgenden Code hinzu: