Continuando con nuestra Guía de Drupal Theming en español tememos que tener en cuenta que para Drupal 8, las hojas de estilo (CSS) y JavaScript (JS) se cargan igual que el de módulos (código) y temas, para todo: asset libraries.

Drupal utiliza un principio de alto nivel: las herramientas (CSS o JS) sólo se cargan si le dices a Drupal que debe cargarlos.

Drupal no carga todos las herramientas (CSS/JS) en todas las páginas, ya que es malo para el rendimiento del front-end.

Diferencias comparando con Drupal 7

Hay cuatro importantes diferencias en comparación con Drupal 7 en la adaptación de la plantilla:

1. Ya no tenemos un archivo THEME.info, sino un archivo THEME.info.yml, pero contiene los mismos datos.
   
    

2. La propiedad de hojas de estilo (para añadir CSS activos) en los archivos THEME.info.yml ya no existe, porque ahora sólo utilizamos las librerías.
   
    

3. Ya no existe la propiedad secuencia de comandos (para agregar JS activos) en los archivos THEME.info.yml, porque ahora sólo utilizamos las librerías.
   
    

4. Sólo el JavaScript necesario en una determinada página se agregaría a la misma. En concreto, Drupal por defecto no necesita JavaScript en la mayoría de las páginas que los usuarios anónimos pueden ver.
   
   Esto significa que jQuery no se carga automáticamente en todas las páginas.
   
    

5. Así, si tu tema necesita jQuery o algún otro JavaScript para estar presentes (que también se define en una librería de activos), necesitas decirle a Drupal que este es el caso, declarando una dependencia en la librería de activos necesaria.
   
    

El proceso

 

Los pasos generales para la carga de las herramientas (CSS/JS) son:

 

1. Guardar el CSS o JS a un archivo.
   
    

2. Definir una "librería", que puede contener tanto los archivos CSS como los JS.
   
    

3. "Adjuntar" la librería a todas las páginas de la librería, a determinados plantillas de Twig, o a un elemento de procesamiento en función de preproceso.
   
    

Definir una librería