web-dev-qa-db-fra.com

Comment inclure une bibliothèque CSS dans mon module personnalisé?

Je veux inclure la bibliothèque CSS YAMM! 3 dans mon Drupal 8. À cette fin, j'ai écrit un module personnalisé en suivant les instructions de cette réponse . Bien que cela la réponse est en ce qui concerne une bibliothèque php, je pensais que cela fonctionnerait également pour une bibliothèque CSS.

C'est le composer.json de mon module personnalisé:

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

Dans le composer.json à la racine de mon Drupal codebase, j'ai ceci:

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

J'ai mis à jour ma base de code avec ces commandes:

$ composer update
$ composer dumpauto

Et j'ai remarqué cette ligne dans la sortie du compositeur:

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

Ce qui est confirmé par un examen du système de fichiers:

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

J'ai activé le my_yamm3 module sur mon site, et sous admin/config/development/performance, J'ai désactivé l'agrégation css.

Cependant, lorsque je charge la page, je ne vois pas les bibliothèques Yamm chargées dans l'onglet réseau de mon navigateur.

Suis-je en utilisant la bonne méthode pour charger une bibliothèque CSS tierce? Qu'est-ce que je fais mal?

[~ # ~] modifier [~ # ~] osman a demandé une confirmation de l'état de mon environnement. Dans ma drupal racine du projet, alors que j'ai /composer.json et les répertoires /drush/ et /vendor/, Je n'ai pas /scripts/ ni /web/. Je suppose que cela signifie que je n'utilise pas le drupal-composer/drupal-project projet.

En ce qui concerne ses ajouts recommandés à composer.json, voici ce que j'avais:

"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"]
    }
},

Encore une fois, il semble que je n'ai pas le projet composer?

8composertheming
4
user1359

Fondamentaux

Pour lier une bibliothèque CSS à votre installation Drupal, elle doit être définie et exposée via un fichier * .libraries.yaml.

Par exemple (tiré du thème chic du noyau):

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

définit qu'il existe une bibliothèque appelée book-navigation qui, lorsqu'il est inclus dans une page, fournira le css/components/book-navigation.css fichier css.

Utilisation de composer avec des bibliothèques CSS tierces

Composer fonctionne facilement et de manière fiable pour les dépendances PHP, en utilisant le merge-plugin de la façon dont vous avez commencé à travailler au PO. Mais, les bibliothèques CSS et Javascript, en particulier lorsqu'une étape de prétraitement ou de construction est requise, sont une autre histoire. Il s'agit d'un problème ouvert et non résolu (à ma connaissance et à ce jour), vous pouvez lire ce numéro pour avoir une idée des problèmes qui se posent:

Le problème principal est que lorsque vous importez la bibliothèque en tant que dépendance composer, comme vous l'avez fait, la bibliothèque est installée dans le répertoire vendor où que se trouve . Vous ne pouvez donc pas supposer grand-chose à l'intérieur de votre fichier * library.yaml sur le chemin d'accès au (x) fichier (s) CSS/JS que vous souhaitez utiliser.

Alternative (A) sans compositeur: utilisation des définitions de bibliothèques CDN/hébergées en externe

Pour votre cas, et sous réserve que vous souhaitiez inclure ce fichier:

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

vous pouvez le définir dans votre fichier * bibliothèques.yaml comme une bibliothèque hébergée en externe (voir # 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 }

N.B .: Cette approche doit toujours fournir les dernières yamm.css version.

Alternative (B) sans compositeur: conserver une copie locale dans le dossier de votre propre module

Si vous placez le fichier CSS dans le dossier de votre module, par exemple css/yamm.css, vous pourrez utiliser la définition yaml suivante dans votre fichier * .libraries.yaml afin de pouvoir l'utiliser:

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

Attacher une bibliothèque à des pages

Enfin, après avoir défini votre bibliothèque, vous pouvez commencer à l'utiliser.

Ceci est largement documenté ici ( https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8- module ) et je recommanderais de le lire si vous ne l'avez pas déjà fait.

Bonne chance!

2
Stefanos Petrakis

Drupal 8 ne permet pas de configurer facilement des bibliothèques qui utilisent des fichiers dans le répertoire du fournisseur. Pour contourner cela, je viens de créer le module Vendor Stream Wrapper , qui crée un wrapper vendor: // stream, permettant la liaison aux fichiers dans le dossier du fournisseur, même s'il est en dehors de la racine Web.

1
Jaypan

Il est plus probable que votre répertoire vendor soit hors de la racine Web. Pourriez-vous confirmer cela?

Si vous utilisez par hasard drupal-composer/drupal-project projet, il aurait une structure de dossiers comme celle-ci:

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

Le dossier libraries est le dossier dans lequel votre bibliothèque YAMM! 3 CSS doit être placée. Pour qu'elle soit également accessible via le Web.

Dans mon composer.json fichier que j'ai Drupal dossiers spécifiques définis dans 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"]
    }
}

Avec l'aide de composer/installers package et la configuration dans extra, chaque package requis par composer est copié dans leurs propres dossiers dédiés. Ainsi, le vôtre pourrait être copié dans le dossier libraries .

Consultez le code et la documentation sur https://github.com/drupal-composer/drupal-project

Il devrait vous fournir tous les détails pour mettre à jour votre projet afin de prendre en charge ce dont vous avez besoin. Sinon, revenez pour plus :)

1
osman