Paso 22: Dando estilos a la interfaz de usuario con Webpack

5.0 version
Maintained

Dando estilos a la interfaz de usuario con Webpack

No hemos dedicado tiempo al diseño de la interfaz de usuario. Para dar estilos como un profesional, usaremos un stack moderno, basado en Webpack. Y para añadir un toque Symfony y facilitar su integración con la aplicación, instalaremos Webpack Encore:

1
$ symfony composer req encore

Se ha creado un entorno Webpack completo: se han generado los ficheros package.json y webpack.config.js que contienen una configuración por defecto adecuada. Si abres webpack.config.js, verás que hace uso de la abstracción Encore para configurar Webpack.

El archivo``package.json`` define algunos comandos que usaremos continuamente.

El directorio``assets`` contiene los puntos de entrada principales para los recursos del proyecto: css/app.css y js/app.js.

Usando Sass

En lugar de usar CSS plano, vamos a cambiar a Sass:

1
$ mv assets/css/app.css assets/css/app.scss
patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -6,7 +6,7 @@
  */

 // any CSS you import will output into a single css file (app.css in this case)
-import '../css/app.css';
+import '../css/app.scss';

 // Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
 // import $ from 'jquery';

Instala el cargador de Sass:

1
$ yarn add node-sass "[email protected]^7.0.1" --dev

Y habilita el cargador Sass (Sass loader) en webpack:

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -54,7 +54,7 @@ Encore
     })

     // enables Sass/SCSS support
-    //.enableSassLoader()
+    .enableSassLoader()

     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()

¿Cómo sabía qué paquetes hay que instalar? Si hubiésemos intentado procesar nuestros recursos sin instalar esos paquetes, Encore nos habría dado un precioso mensaje de error sugiriéndonos la ejecución del comando yarn add necesario para instalar las dependencias que permiten cargar los tipos de archivos``.scss``.

Añadiendo Bootstrap

Si queremos partir de unos buenos cimientos a la hora de construir un sitio web adaptativo, puede ser muy útil la utilización de un framework CSS tal como Bootstrap. Instálalo como un paquete:

1
$ yarn add bootstrap jquery popper.js bs-custom-file-input --dev

Incluye Bootstrap en el archivo CSS (también hemos limpiado el contenido del archivo):

patch_file
1
2
3
4
5
6
7
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -1,3 +1 @@
-body {
-    background-color: lightgray;
-}
[email protected] '~bootstrap/scss/bootstrap';

Haz lo mismo con el archivo JS:

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -7,8 +7,7 @@

 // any CSS you import will output into a single css file (app.css in this case)
 import '../css/app.scss';
+import 'bootstrap';
+import bsCustomFileInput from 'bs-custom-file-input';

-// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
-// import $ from 'jquery';
-
-console.log('Hello Webpack Encore! Edit me in assets/js/app.js');
+bsCustomFileInput.init();

El sistema de formularios de Symfony dispone de soporte para Bootstrap de forma nativa a través de un tema especial, habilítalo:

config/packages/twig.yaml
1
2
twig:
    form_themes: ['bootstrap_4_layout.html.twig']

Dando estilo al HTML

Ahora estamos listos para dar estilo a la aplicación. Descarga y descomprime el archivo en la raíz del proyecto:

1
2
3
$ php -r "copy('https://symfony.com/uploads/assets/guestbook.zip', 'guestbook.zip');"
$ unzip -o guestbook.zip
$ rm guestbook.zip

Echa un ojo a las plantillas, puedes aprender un par de trucos sobre Twig.

Construyendo los assets

Un cambio importante al usar Webpack es que los archivos CSS y JS no se utilizan directamente por la aplicación. Primero necesitan ser «compilados».

Durante el desarrollo, la compilación de los assets se puede hacer a través del comando encore dev:

1
$ symfony run yarn encore dev

En lugar de ejecutar el comando cada vez que haya un cambio, déjalo corriendo en segundo plano para que reaccione a los cambios en JS y CSS:

1
$ symfony run -d yarn encore dev --watch

Tómate tu tiempo para observar los cambios visuales. Echa un vistazo al nuevo diseño en un navegador.

El formulario de inicio de sesión generado tiene ahora estilo ya que el bundle Maker utiliza clases CSS Bootstrap de forma predeterminada:

Para producción, SymfonyCloud detecta automáticamente si se está utilizando Encore y compila los assets durante la fase de compilación.


  • « Previous Paso 21: Almacenando en caché para mejorar el rendimiento
  • Next » Paso 23: Redimensionando imágenes

This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.