it-swarm.com.de

Wie füge ich eine CSS-Bibliothek in mein benutzerdefiniertes Modul ein?

Ich möchte die YAMM! 3-CSS-Bibliothek in meine Drupal 8-Site) aufnehmen. Zu diesem Zweck habe ich ein benutzerdefiniertes Modul geschrieben, das den Anweisungen in diese Antwort folgt Die Antwort bezieht sich auf eine PHP-Bibliothek. Ich dachte, sie würde auch für eine CSS-Bibliothek funktionieren.

Dies ist der composer.json Aus meinem benutzerdefinierten Modul:

{
  "name": "drupal/my_yamm3",
  "type": "drupal-module",
  "require": {
    "geedmo/yamm3": "*"
  }
}

In der composer.json Im Stammverzeichnis meiner Drupal Codebasis) habe ich Folgendes:

"extra": {
    ...
    "merge-plugin": {
        "include": [
            "core/composer.json",
            "modules/custom/my_yamm3/composer.json"
        ],
    ...

Ich habe meine Codebasis mit folgenden Befehlen aktualisiert:

$ composer update
$ composer dumpauto

Und ich habe diese Zeile in der Ausgabe des Komponisten bemerkt:

> Drupal\Core\Composer\Composer::vendorTestCodeCleanup
  - Installing geedmo/yamm3 (1.1.0): Loading from cache

Was durch eine Prüfung des Dateisystems bestätigt wird:

$ ls vendor/geedmo/yamm3/
bower.json  composer.json  demo/  gulpfile.js  index.html  LICENSE.txt  package.json  README.md  yamm/

Ich habe das Modul my_yamm3 Auf meiner Site aktiviert und unter admin/config/development/performance Die CSS-Aggregation deaktiviert.

Wenn ich die Seite lade, werden die Yamm-Bibliotheken in meinem Browser jedoch nicht auf der Registerkarte "Netzwerk" geladen.

Verwende ich die richtige Methode, um eine CSS-Bibliothek eines Drittanbieters zu laden? Was mache ich falsch?

[~ # ~] edit [~ # ~] osman bat um eine Bestätigung des Zustands meiner Umgebung. In meinem drupal Projektstamm, obwohl ich /composer.json Und die Verzeichnisse /drush/ Und /vendor/ Habe, habe ich nicht /scripts/ Noch /web/. Ich denke, das bedeutet, dass ich das Projekt drupal-composer/drupal-project Nicht verwende.

In Bezug auf seine empfohlenen Ergänzungen zu composer.json Hatte ich Folgendes:

"extra": {
    "installer-paths": {
        "core": ["type:drupal-core"],
        "modules/contrib/{$name}": ["type:drupal-module"],
        "profiles/contrib/{$name}": ["type:drupal-profile"],
        "themes/contrib/{$name}": ["type:drupal-theme"],
        "drush/contrib/{$name}": ["type:drupal-drush"],
        "modules/custom/{$name}": ["type:drupal-custom-module"],
        "themes/custom/{$name}": ["type:drupal-custom-theme"]
    }
},

Es sieht also wieder so aus, als hätte ich das Projekt composer?) Nicht.

4
user1359

Grundlagen

Um eine CSS-Bibliothek in Ihre Drupal-Installation) einzubinden, sollte sie über eine * .libraries.yaml-Datei definiert und verfügbar gemacht werden.

Zum Beispiel (aus dem klassischen Thema des Kerns):

book-navigation:
  version: VERSION
  css:
    component:
      css/components/book-navigation.css: {}

definiert, dass es eine Bibliothek namens book-navigation gibt, die, wenn sie auf einer Seite enthalten ist, die CSS-Datei css/components/book-navigation.css liefert.

Verwenden von composer mit CSS-Bibliotheken von Drittanbietern

Composer funktioniert einfach und zuverlässig für PHP Abhängigkeiten, unter Verwendung von merge-plugin In der Art und Weise, wie Sie mit der Arbeit im OP begonnen haben. CSS- und Javascript-Bibliotheken jedoch, insbesondere bei Vorverarbeitungs- oder Erstellungsschritten ist erforderlich, sind eine andere Geschichte. Dies ist ein offenes und ungelöstes (meines Wissens und bis heute) Problem. Sie können diese Ausgabe lesen, um eine Vorstellung davon zu bekommen, welche Probleme auftreten:

Das Hauptproblem besteht darin, dass beim Importieren der Bibliothek als composer - Abhängigkeit wie Sie die Bibliothek im Verzeichnis vendor installiert wird ) Überall dort, wo sich befindet. Daher können Sie in Ihrer Datei * library.yaml nicht viel über den Dateipfad zu den CSS/JS-Dateien annehmen, die Sie verwenden möchten.

Alternative (A) ohne Komponisten: Verwendung von CDN/extern gehosteten Bibliotheksdefinitionen

Für Ihren Fall und angenommen, dass Sie diese Datei einschließen möchten:

https://raw.githubusercontent.com/geedmo/yamm3/master/yamm/yamm.css

sie können es in Ihrer * library.yaml-Datei als extern gehostete Bibliothek definieren (siehe # external ):

my_module.yamm3:
  remote:  https://raw.githubusercontent.com/geedmo/yamm3/master/yamm/yamm.css
  version: VERSION
  license:
    name: MIT
    url: https://github.com/geedmo/yamm3/blob/master/LICENSE.txt
    gpl-compatible: true
  css:
    theme:
      https://raw.githubusercontent.com/geedmo/yamm3/master/yamm/yamm.css : { type: external }

NB.: Dieser Ansatz sollte immer die neueste yamm.css Version liefern.

Alternative (B) ohne Komponisten: Bewahren Sie eine lokale Kopie im Ordner Ihres eigenen Moduls auf

Wenn Sie die CSS-Datei im Ordner Ihres Moduls ablegen, z. css/yamm.css Können Sie die folgende yaml-Definition in Ihrer * .libraries.yaml-Datei verwenden, um sie verwenden zu können:

my_module.yamm3:
  version: VERSION
  css:
    theme:
      css/yamm.css : {}

Anhängen einer Bibliothek an Seite (n)

Nachdem Sie Ihre Bibliothek definiert haben, können Sie sie schließlich verwenden.

Dies ist hier ausführlich dokumentiert ( https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-) Modul ) und ich würde empfehlen, das zu lesen, wenn Sie es noch nicht getan haben.

Viel Glück!

2

Drupal 8 bietet keine einfache Möglichkeit, Bibliotheken einzurichten, die Dateien im Herstellerverzeichnis verwenden. Um dies zu umgehen, habe ich gerade das Vendor Stream Wrapper-Modul erstellt, das einen Vendor: // Stream-Wrapper erstellt, der die Verknüpfung mit Dateien im Vendor-Ordner ermöglicht, auch wenn er sich außerhalb der Webroot befindet.

1
Jaypan

Wahrscheinlicher ist, dass sich Ihr vendor -Verzeichnis außerhalb des Webstamms befindet. Könnten Sie das bestätigen?

Wenn Sie zufällig drupal-composer/drupal-project Projekt, es hätte eine Ordnerstruktur wie diese:

/composer.json
/drush/
/scripts/
/vendor/
/web/
/web/core/
/web/libraries/
/web/modules/
/web/profiles/
/web/sites/
/web/themes/
...

Der Ordner libraries ist der Ordner, in dem Sie Ihre YAMM! 3 CSS Bibliothek ablegen müssen, damit Sie auch über das Web darauf zugreifen können.

In meinem composer.json Datei Ich habe Drupal spezifische Ordner definiert in extra.installer-paths:

...
"extra": {
    "installer-paths": {
        "web/core": ["type:drupal-core"],
        "web/libraries/{$name}": ["type:drupal-library"],
        "web/modules/contrib/{$name}": ["type:drupal-module"],
        "web/profiles/contrib/{$name}": ["type:drupal-profile"],
        "web/themes/contrib/{$name}": ["type:drupal-theme"],
        "drush/contrib/{$name}": ["type:drupal-drush"]
    }
}

Mit der Hilfe von composer/installers Paket und die Konfiguration in extra, jedes Paket, das von composer) benötigt wird, wird in seine eigenen dedizierten Ordner kopiert. Ihr Paket kann also in den Ordner libraries kopiert werden .

Überprüfen Sie den Code und die Dokumentation unter https://github.com/drupal-composer/drupal-project

Es sollte alle Details enthalten, damit Sie Ihr Projekt aktualisieren können, um das zu unterstützen, was Sie benötigen. Ansonsten komm zurück für mehr :)

1
osman