El blog de ASPgems

Siguiendo el día a día de ASPgems

Agregar Ficheros CSS / JS en Drupal 8

Css y Js en Drupal 8

Ha cambiado mucho la forma de trabajar con los temas en Drupal 8, antes utilizabamos un fichero *.info para declarar el tema, css  pero ahora toda esta definición se hace en ficheros con extensión yml y es que desde que han introducido YAML (YAML Ain’t Another Markup Language) en los temas todo es mucho más sencillo.

 

Definicion del tema

Antes utilizabamos un fichero .info para definir el tema, css, js, ... ahora en el .info solo definimos el tema , regiones pero todo lo que son css y js lo hacemos en otro fichero. 

Ejemplo de mytheme.info.yml

 # core: 8.x
type: theme

# nombre base padre
base theme: bootstrap

name: ' Drupal 8 Theme'
description: ' Drupal 8 theme '
package: 'Bootstrap'

#definimos las regiones
regions:
header: xxx
navigation: 'Navigation'
content: 'Content'
sidebar:’Sidebar’
footer: 'Footer'

libraries:
- demo/global-styling'

version: '8.x-1.10'
core: '8.x'
project: 'demo'
datestamp: 1487857997 

 

Definir los css y js en nuestro fichero *.libraries.yml

En un fichero que sea el nombre del tema y acabado en .libraries.yml declaramos los css y js 

Por ejemplo:  demo.libraries.yml

 

Antes:

stylesheets[all][] = css/layout.css

stylesheets[all][] = css/style.css

stylesheets[all][] = css/colors.css

stylesheets[print][] = css/print.css

 

Ahora:

Para definir los estilos globales usaremos global-styling y a continuación todo lo que necesitemos.

Tambien podemos definir si queremos cargar los js en la cabecera o en el footer.

 global-styling:

css: 
  theme: 
   css/layout.css {} 
   css/style.css: {} 
   css/responsive.css: {} 

open-sans: 
css: 
  theme: 
    '//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,600,800': { type: external, minified: true } 
 
 
Veamos otro ejemplo del theme de boostrap 8 
 
attributes: js: js/attributes.js: {} dependencies: - core/jquery - core/underscore drupal.bootstrap: js: js/drupal.bootstrap.js: {} dependencies: - core/jquery - core/drupal - core/drupalSettings # Create a library placeholder for livereload. # This is altered dynamically based on the set URL. # @see \Drupal\bootstrap\Plugin\Alter\LibraryInfo::alter livereload: js: livereload.js: {} theme: js: js/theme.js: {} dependencies: - bootstrap/drupal.bootstrap - bootstrap/attributes theme-settings: js: js/theme-settings.js: {} dependencies: - core/jquery - core/jquery.once - core/drupal - core/drupalSettings
..... 

 

En definitiva se simplifica mucho mas la forma de cargar los ficheros *.css y *.js   podemos indicar donde cargar los archivos js si e nel footer o en el header,  tambien la posibilidad de sobreescribir y extender librerias. 

Si quereis mas información lo mejor es utilizar la referencia oficial

https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-an...

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

 

Añadir nuevo comentario

Desarrollo con Drupal

Desarrollo con Drupal
Equipo de desarrollo de drupal 7 y drupal 8.

Etiquetas

Artículos relacionados

Nuestra revista

View my Flipboard Magazine