WEBVTT

00:00:01.076 --> 00:00:04.456 align:middle
Ahora tenemos un nuevo y bonito
sistema de JavaScript y CSS

00:00:04.456 --> 00:00:07.586 align:middle
que vive completamente dentro
del directorio assets/.

00:00:08.376 --> 00:00:10.356 align:middle
Vamos a trasladar nuestros
estilos públicos a éste.

00:00:11.076 --> 00:00:17.506 align:middle
Abre public/styles/app.css, copia
todo esto, borra todo el directorio...

00:00:17.936 --> 00:00:20.416 align:middle
y pégalo en el nuevo app.css.

00:00:20.416 --> 00:00:29.116 align:middle
Gracias al encore_entry_link_tags() en
base.html.twig, el nuevo CSS se está incluyendo...

00:00:29.246 --> 00:00:31.806 align:middle
y ya no necesitamos la antigua etiqueta link.

00:00:32.906 --> 00:00:33.496 align:middle
Ve a comprobarlo.

00:00:34.326 --> 00:00:35.636 align:middle
Refresca y...

00:00:35.936 --> 00:00:37.576 align:middle
¡todavía se ve muy bien!

00:00:38.426 --> 00:00:40.736 align:middle
Vuelve a base.html.twig.

00:00:41.426 --> 00:00:45.876 align:middle
¿Qué pasa con estas etiquetas de enlace
externo para bootstrap y FontAwesome?

00:00:46.686 --> 00:00:49.766 align:middle
Bueno, puedes mantener
totalmente estos enlaces CDN.

00:00:50.216 --> 00:00:53.676 align:middle
Pero también podemos procesar
estas cosas a través de Encore.

00:00:54.456 --> 00:01:01.096 align:middle
¿Cómo? Instalando Bootstrap y FontAwesome
como bibliotecas de proveedor e importándolas.

00:01:01.956 --> 00:01:03.546 align:middle
Elimina todas estas etiquetas de enlace...

00:01:03.726 --> 00:01:05.186 align:middle
y luego actualiza.

00:01:07.406 --> 00:01:11.356 align:middle
¡Vaya! Vuelve a parecer
que he diseñado este sitio.

00:01:12.066 --> 00:01:14.096 align:middle
Vamos... primero a volver a añadir bootstrap.

00:01:14.686 --> 00:01:15.676 align:middle
Busca tu terminal.

00:01:16.586 --> 00:01:20.596 align:middle
Ya que el comando watch se está ejecutando,
abre una nueva pestaña de terminal y ejecútalo:

00:01:20.776 --> 00:01:26.696 align:middle
yarn add bootstrap --dev Esto hace tres cosas.

00:01:27.656 --> 00:01:31.116 align:middle
Primero, añade bootstrap a
nuestro archivo package.json.

00:01:32.356 --> 00:01:36.316 align:middle
En segundo lugar, descarga bootstrap
en nuestro directorio node_modules/...

00:01:36.566 --> 00:01:37.756 align:middle
que encontrarás aquí abajo.

00:01:39.236 --> 00:01:44.306 align:middle
Y tercero, actualiza el archivo
yarn.lock con la versión exacta

00:01:44.306 --> 00:01:46.526 align:middle
de bootstrap que acaba de descargar.

00:01:47.656 --> 00:01:48.606 align:middle
Si nos detuviéramos ahora...

00:01:49.096 --> 00:01:51.276 align:middle
¡esto no supondría ninguna diferencia!

00:01:51.636 --> 00:01:56.366 align:middle
Hemos descargado bootstrap -yay-
pero no lo estamos utilizando.

00:01:57.226 --> 00:01:59.876 align:middle
Para usarlo, tenemos que importarlo.

00:02:00.546 --> 00:02:02.196 align:middle
Entra en app.css.

00:02:03.516 --> 00:02:09.056 align:middle
Al igual que en los archivos JavaScript, podemos
importar desde dentro de los archivos CSS

00:02:09.126 --> 00:02:11.976 align:middle
diciendo @import y luego el archivo.

00:02:12.736 --> 00:02:15.356 align:middle
Podemos hacer referencia a un archivo en
el mismo directorio con ./other-file.css.

00:02:15.356 --> 00:02:17.446 align:middle
O,

00:02:17.926 --> 00:02:24.196 align:middle
si quieres importar algo del directorio
node_modules/ en CSS, hay un truco: un

00:02:24.446 --> 00:02:28.146 align:middle
~ y luego el nombre del
paquete: bootstrap. Eso es

00:02:28.686 --> 00:02:29.566 align:middle
todo En

00:02:30.216 --> 00:02:36.216 align:middle
cuanto hicimos eso, la función de vigilancia de
Encore reconstruyó nuestro archivo app.css... ¡que

00:02:36.466 --> 00:02:39.016 align:middle
ahora incluye Bootstrap! Observa:

00:02:39.456 --> 00:02:41.786 align:middle
actualiza la página y...

00:02:42.456 --> 00:02:43.616 align:middle
¡volvemos a estar en ella! ¡ Qué

00:02:43.746 --> 00:02:49.766 align:middle
bien! Las otras dos cosas que nos faltan son
FontAwesome y una fuente específica. Para

00:02:50.566 --> 00:02:59.476 align:middle
añadirlas, vuelve al terminal y ejecútalas:
yarn add @fontsource/roboto-condensed --dev

00:02:59.476 --> 00:03:05.186 align:middle
Revelación completa: hice algunas
búsquedas antes de grabar para

00:03:05.396 --> 00:03:08.716 align:middle
saber los nombres de todos
los paquetes que necesitamos.

00:03:09.486 --> 00:03:13.276 align:middle
Puedes buscar los paquetes
en https://npmjs.com.

00:03:14.546 --> 00:03:20.826 align:middle
Añadamos también el último que necesitamos:
yarn add @fortawesome/fontawesome-free --dev

00:03:20.896 --> 00:03:27.216 align:middle
De nuevo, esto descargó las dos
bibliotecas en nuestro proyecto... pero

00:03:27.316 --> 00:03:30.046 align:middle
no las utiliza automáticamente todavía. Como

00:03:30.816 --> 00:03:37.716 align:middle
esas bibliotecas contienen archivos CSS, vuelve
a nuestro archivo app.css e impórtalas: @import

00:03:38.346 --> 00:03:43.626 align:middle
'~' entonces @fortawesome/fontawesome-free. Y

00:03:44.666 --> 00:03:49.506 align:middle
@import '~@fontsource/roboto-condensed'. El

00:03:50.216 --> 00:03:52.966 align:middle
primer paquete debería
arreglar este icono... y

00:03:53.286 --> 00:03:57.066 align:middle
el segundo debería hacer que la fuente
cambie en toda la página. Observa

00:03:57.796 --> 00:03:59.836 align:middle
el tipo de letra cuando actualizamos...

00:04:00.636 --> 00:04:02.016 align:middle
¡sí que ha cambiado! Pero...

00:04:02.416 --> 00:04:02.886 align:middle
los iconos

00:04:02.936 --> 00:04:06.026 align:middle
siguen estando algo rotos. Para

00:04:07.076 --> 00:04:11.236 align:middle
ser totalmente honesto, no estoy seguro de
por qué no funcionan fuera de la caja. Pero

00:04:11.286 --> 00:04:13.316 align:middle
la solución es bastante
interesante. Mantén pulsado

00:04:14.336 --> 00:04:20.366 align:middle
command en un Mac -o ctrl en caso contrario- y
haz clic en esta cadena fontawesome-free. Cuando

00:04:21.326 --> 00:04:26.286 align:middle
usas esta sintaxis, va a tu
directorio node_modules/, a

00:04:26.626 --> 00:04:30.036 align:middle
@fortawesome/fontawesome-free ... y

00:04:30.546 --> 00:04:36.026 align:middle
entonces, si no pones ningún nombre de archivo
después de esto, hay un mecanismo en el que

00:04:36.206 --> 00:04:41.586 align:middle
esta biblioteca le dice a Webpack
qué archivo CSS debe importar. Por

00:04:42.316 --> 00:04:46.306 align:middle
defecto, importa este
archivo fontawesome.css. Por

00:04:47.036 --> 00:04:48.256 align:middle
alguna razón... eso

00:04:48.316 --> 00:04:49.566 align:middle
no funciona. Lo que

00:04:50.116 --> 00:04:52.906 align:middle
queremos es este all.css. Y

00:04:53.446 --> 00:05:00.176 align:middle
podemos importarlo añadiendo
la ruta: /css/all.css.

00:05:00.686 --> 00:05:05.226 align:middle
No necesitamos el archivo minificado porque
Encore se encarga de minificar por nosotros. Y

00:05:06.136 --> 00:05:06.876 align:middle
ahora ... ¡estamos

00:05:07.606 --> 00:05:08.876 align:middle
de vuelta! La

00:05:09.676 --> 00:05:14.086 align:middle
principal razón por la que me encanta
Webpack Encore y este sistema es que

00:05:14.086 --> 00:05:16.966 align:middle
nos permite utilizar importaciones adecuadas.

00:05:17.796 --> 00:05:23.976 align:middle
Incluso podemos organizar nuestro JavaScript en pequeños
archivos -poniendo clases o funciones en cada uno- y

00:05:24.446 --> 00:05:26.876 align:middle
luego importarlos cuando los necesitemos.

00:05:27.486 --> 00:05:30.356 align:middle
Ya no son necesarias las
variables globales. Webpack

00:05:31.116 --> 00:05:37.396 align:middle
también nos permite utilizar cosas más
serias como React o Vue: incluso puedes ver, en

00:05:37.566 --> 00:05:41.466 align:middle
webpack.config.js , los
métodos para activarlos. Pero

00:05:42.096 --> 00:05:48.116 align:middle
, por lo general, me gusta utilizar una encantadora
biblioteca de JavaScript llamada Stimulus. Y

00:05:48.596 --> 00:05:50.626 align:middle
quiero hablarte de ella a continuación