Ajout de css et js

Surce : https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

Dans drupal 7 on les déclarait dans le theme.info - maintenant c'est dans *.libraries.yml. 

Pour optimiser, drupal ne charge pas les assets (=js et css) pour les pages si on ne les demande pas (notement jQuery). Les assets qui doivent etre chargés pour toutes les pages doivent etre déclarées dans *.libraries.yml

En pratique, on a 3 étapes:

1. mettre js et css avec le bon nom et bon endroit (SMACSS, séparer les css "Base", "Layout" et "Component"... cf css-file-organization-for-drupal-8)
2. définir une librairie (qui contient css, js ou les 2)
3. "Attacher" la librairie à toutes les pages, à un/des templatesTwig spécifiés, ou sur un élément rendu par une fonction preprocess.

définir une/des librairies

Par ex: pour un theme nommé fluffiness (c'est aussi le nom du dossier), fluffiness/fluffiness.libraries.yml

cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}

Si ce .js a besoin de JQuery sur toutes les pages, alors il faut déclarer cette dépendansce (JQuery est maintenant dans le core) :

cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery

Si une autre lib a besoin de ce cuddly-slider il faut déclarer (syntaxe): nomtheme/nom-lib => fluffiness/cuddly-slider

Beaucoup (la pluspart) de thèmes utilisent une syntaxe de librairie style globale (pour les css) qui ont besoin d'etre chargé sur chaque page (où le thème est actif):

global-styling:
  version: 1.x
  css:
    theme:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }

Note: on peux maintenant déclarer media: print (impossible dans drupal 7) en bas des déclaration des assets.

ordre de chargement des assets

par défaut, les js sont chargé en pied de page, sinon, c'est chargé dans l'ordre des déclarations.

Si on a besoin d'avoir le js en en-tete (cas où un element critique de l'UI ne peux etre affiché tant que le js correspondant n'a pas été chargé): ajouter header: true :

js-header:
  header: true
  js:
    header.js: {}

js-footer:
  js:
    footer.js: {}

Surcharger et étendre les librairies

Sur le web

https://www.drupal.org/docs/develop/standards/css/css-file-organization-for-drupal-8