Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

Instalación de código de terceros en nuestro JS/CSS

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

Ahora tenemos un nuevo y bonito sistema de JavaScript y CSS que vive completamente dentro del directorioassets/. Vamos a trasladar nuestros estilos públicos a éste. Abrepublic/styles/app.css, copia todo esto, borra todo el directorio... y pégalo en el nuevo app.css. Gracias a encore_entry_link_tags() enbase.html.twig, el nuevo CSS se está incluyendo... y ya no necesitamos la antigua etiquetalink.

Ve a comprobarlo. Refresca y... ¡todavía se ve muy bien!

Instalación de bibliotecas JavaScript/CSS de terceros

Vuelve a base.html.twig. ¿Qué pasa con estas etiquetas de enlace externo para bootstrap y FontAwesome? Bueno, puedes mantener totalmente estos enlaces CDN. Pero también podemos procesar estas cosas a través de Encore. ¿Cómo? Instalando Bootstrap y FontAwesome como bibliotecas de proveedor e importándolas.

Elimina todas estas etiquetas de enlace... y luego actualiza. ¡Vaya! Vuelve a parecer que he diseñado este sitio. Vamos... primero a volver a añadir bootstrap. Busca tu terminal. Ya que el comando watch se está ejecutando, abre una nueva pestaña de terminal y ejecútalo:

yarn add bootstrap --dev

Esto hace tres cosas. Primero, añade bootstrap a nuestro archivo package.json. Segundo, descarga bootstrap en nuestro directorio node_modules/... lo encontrarías aquí abajo. Y tercero, actualiza el archivo yarn.lock con la versión exacta de bootstrap que acaba de descargar.

Si nos detuviéramos ahora... ¡esto no supondría ninguna diferencia! Hemos descargado bootstrap -yay- pero no lo estamos utilizando.

Para usarlo, tenemos que importarlo. Entra en app.css. Al igual que en los archivos JavaScript, podemos importar desde dentro de los archivos CSS diciendo @import y luego el archivo. Podemos hacer referencia a un archivo en el mismo directorio con ./other-file.css. O, si quieres importar algo del directorio node_modules/ en CSS, hay un truco: un ~ y luego el nombre del paquete: bootstrap.

@import '~bootstrap';
... lines 2 - 34

Eso es todo En cuanto hicimos eso, la función de vigilancia de Encore reconstruyó nuestro archivo app.css... ¡que ahora incluye Bootstrap! Observa: actualiza la página y... ¡volvemos a estar de vuelta! ¡Qué bien!

Las otras dos cosas que nos faltan son FontAwesome y una fuente específica. Para añadirlas, vuelve al terminal y ejecútalas:

yarn add @fontsource/roboto-condensed --dev

Revelación completa: hice algunas búsquedas antes de grabar para saber los nombres de todos los paquetes que necesitamos. Puedes buscar los paquetes en https://npmjs.com.

Añadamos también el último que necesitamos:

yarn add @fortawesome/fontawesome-free --dev

De nuevo, esto descargó las dos bibliotecas en nuestro proyecto... pero no las utiliza automáticamente todavía. Como esas bibliotecas contienen archivos CSS, vuelve a nuestro archivoapp.css e impórtalos: @import '~' y luego @fortawesome/fontawesome-free. Y @import '~@fontsource/roboto-condensed'.

@import '~bootstrap';
@import '~@fortawesome/fontawesome-free';
@import '~@fontsource/roboto-condensed';
... lines 5 - 34

El primer paquete debería arreglar este icono... y el segundo debería hacer que la fuente cambie en toda la página. Observa el tipo de letra cuando refrescamos... ¡ha cambiado! Pero... los iconos siguen estando algo rotos.

Importar archivos específicos de node_modules/

Para ser totalmente honesto, no estoy seguro de por qué esto no funciona fuera de la caja. Pero la solución es bastante interesante. Mantén pulsado command en un Mac -o ctrl en caso contrario- y haz clic en esta cadena fontawesome-free.

Cuando usas esta sintaxis, va a tu directorio node_modules/, a@fortawesome/fontawesome-free... y entonces, si no pones ningún nombre de archivo después de esto, hay un mecanismo en el que esta biblioteca le dice a Webpack qué archivo CSS debe importar. Por defecto, importa este archivo fontawesome.css. Por alguna razón... eso no funciona. Lo que queremos es este all.css.

Y podemos importarlo añadiendo la ruta: /css/all.css. No necesitamos el archivo minificado porque Encore se encarga de minificar por nosotros.

@import '~bootstrap';
@import '~@fortawesome/fontawesome-free/css/all.css';
@import '~@fontsource/roboto-condensed';
... lines 5 - 34

Y ahora... ¡estamos de vuelta!

La principal razón por la que me encanta Webpack Encore y este sistema es que nos permite utilizar importaciones adecuadas. Incluso podemos organizar nuestro JavaScript en pequeños archivos -poniendo clases o funciones en cada uno- y luego importarlos cuando los necesitemos. Ya no son necesarias las variables globales.

Webpack también nos permite utilizar cosas más serias como React o Vue: incluso puedes ver, en webpack.config.js, los métodos para activarlos.

Pero, por lo general, me gusta utilizar una encantadora biblioteca de JavaScript llamada Stimulus. Y quiero hablarte de ella a continuación.

Leave a comment!

17
Login or Register to join the conversation
Kaizoku Avatar
Kaizoku Avatar Kaizoku | posted hace 1 año

Hi Ryan,
I wrote a comment on Stackoverflow about why fontawesome is not working out of the box
it's here : https://stackoverflow.com/a...
And fun fact this is actually you that explained why in one of your video, so all the credit is on you ;)

1 Reply

Hey Kaizoku!

Haha, OMG, did I really? I have a famously bad memory 😆. I wish FontAwesome would fix that to make things easier! And thanks for posting that answer on Stackoverflow for others - that's very cool of you.

Cheers!

Reply
DSKZPT Avatar

I knoooow I'm early - But my `~bootstrap` isn't working and throws an error on compiling (not found).
If I use `import "../node_modules/bootstrap"` anything works well.

Do you have any hint to fix this?

1 Reply

Hey DSKZPT!

Ha! That's ok that you're early :). Hmm, that is super odd. You have this inside of assets/styles/app.css?


@import '~bootstrap';

Let me know :).

Cheers!

1 Reply
DSKZPT Avatar

yeah... my fault, i added it to the app.js 🤦🏻‍♂️

The good thing in making mistakes - you learn something!
The more mistakes you make, the smarter you get :D

Thanks for your answer and these great tutorials!

Reply

Hey DSKZPT!

Ah, awesome! Np. Bootstrap is a weird one... since it provides both JavaScript AND CSS. If you put that import in app.js, it knows to import the Bootstrap JavaScript. But then that SAME import in a CSS file tells Webpack to import the CSS. Pretty cool and pretty smart. But also, a bit magical ;).

Cheers and thanks for the nice words!

Reply
CindySymf Avatar
CindySymf Avatar CindySymf | posted hace 1 mes | edited

Hi I'm running yarn add bootstrap --dev and I get the error below. I'm running this just after running composer require encore:1.14.0 (and yarn watch, both ran fine). I'm backtracking steps as in the next lecture when I add <div data-controller="hello"></div> to homepage.html.twig it does not show up on my site.

Error when running yarn add bootstrap --dev

WAIT  Compiling...                                                                                          12:20:11 pm

 ERROR  Failed to compile with 2 errors                                                                      12:20:11 pm

 error  in ./node_modules/css-loader/dist/runtime/cssWithMappingToString.js                                  12:20:11 pm

Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\sbhe0002\mixed_vinyl\node_modules\css-loader\dist\runtime\cssWithMappingToString.js'

 error  in ./assets/styles/app.css                                                                           12:20:11 pm

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\sbhe0002\mixed_vinyl\node_modules\css-loader\dist\runtime\cssWithMappingToString.js'
    at processResult (C:\Users\sbhe0002\mixed_vinyl\node_modules\webpack\lib\NormalModule.js:764:19)
    at C:\Users\sbhe0002\mixed_vinyl\node_modules\webpack\lib\NormalModule.js:866:5
    at C:\Users\sbhe0002\mixed_vinyl\node_modules\loader-runner\lib\LoaderRunner.js:400:11
    at C:\Users\sbhe0002\mixed_vinyl\node_modules\loader-runner\lib\LoaderRunner.js:221:19
    at C:\Users\sbhe0002\mixed_vinyl\node_modules\webpack\lib\NormalModule.js:836:24
    at Array.eval (eval at create (C:\Users\sbhe0002\mixed_vinyl\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at runCallbacks (C:\Users\sbhe0002\mixed_vinyl\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:15)
    at ReadFileContext.<anonymous> (C:\Users\sbhe0002\mixed_vinyl\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:249:5)
    at ReadFileContext.callback (C:\Users\sbhe0002\mixed_vinyl\node_modules\graceful-fs\graceful-fs.js:123:16)
    at FSReqCallback.readFileAfterOpen [as oncomplete] (node:fs:327:13)
    
Entrypoint app [big] 697 KiB = runtime.js 14.6 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_da-03e5c3.js 644 KiB app.js 38.8 KiB
webpack compiled with 2 errors
Reply

Hey @CindySymf!

Well that is not a fun error! Honestly, it looks like something failed to download - it's super odd. One of the node vendor packages you downloaded is referring to another vendor file... which doesn't appear to be there! That just... shouldn't happen - I can't think of how this could be something that your code is causing.

Try these 2 things:

1) Remove the node_modules/ directory by hand. Then run yarn install again. Then try it again.
2) If that doesn't work, then try yarn upgrade to upgrade the dependencies. It's possible things are just out-of-date enough that it's causing some weird issue.

And let me know how it goes :)

Cheers!

Reply
Sahetmyrat Avatar
Sahetmyrat Avatar Sahetmyrat | posted hace 9 meses

Hello, I've imported Quilljs text styling library: @import "~quill"; But it didn't build.
(16:3) node_modules\quill\dist\quill.js Unclosed bracket

How can I solve that? Or isn't Quill compatible with Symfony? Thanks!

Reply

Hey Sahetmyrat,

I don't know that library, but it has nothing to do with Symfony, although it may not be compatible with NodeJS. Try importing the JS and CSS files from a JS file. In your app.js file (or any other) add this

import 'quill';
import 'quill/dist/{the-css-file}';

Cheers!

Reply
akincer Avatar
akincer Avatar akincer | posted hace 1 año

Hey folks, has there been a change in recent Symfony/Twig versions that would cause variables passed to a Twig template not to be updated on calling render() after a form submit?

That's what I'm seeing when trying to use CraueFormFlowBundle and the lack of variables sent to Twig updating is breaking things. I've validated using logging and {{ dump() }} that the value being sent on render() SHOULD be updated but isn't.

I'm guessing disabling caching might fix this but surely that isn't the best solution.

Reply
Yactouat Avatar
Yactouat Avatar Yactouat | posted hace 1 año

thanks that was a great course, wishful thinking => can we have the js part in typescript ? :)

Reply
Santosh kalwar Avatar
Santosh kalwar Avatar Santosh kalwar | posted hace 1 año

Hey @weaverryan

Awesome stuff. Can I use this material to teach my students about introducing Symfony 6?

I am looking forward to your answer.

Reply

Hi Santosh kalwar!

Absolutely! This tutorial is totally free and open to anyone. Feel free to use it for your students in any way that you want - that would be great :). If you have any questions, let us know.

Cheers!

Reply
Santosh kalwar Avatar
Santosh kalwar Avatar Santosh kalwar | weaverryan | posted hace 1 año

Thank you!

Reply

Hey there,

I'm not sure why but when using SCSS, if you import vendors in your scss files, vendor styles get compiled into the app.css file instead of in a vendor file. I've been having this problem since the first versions of Encore. The easy fix was to import these vendor scss file from javascript instead but I was wondering if there was a way to do that from the scss files and still get that nice vendor css file?

<br /># app.scss<br />@import '~bootstrap';<br />@import '~@fortawesome/fontawesome-free/scss/fontawesome';<br />@import '~@fontsource/roboto-condensed';<br />

Reply

Hey julien_bonnier!

Oh really, that's very interesting! This is not something I've noticed before. So, to make sure I understand correctly, when you import from app.scss, Webpack does NOT split the vendor CSS into some node_modules~bootstrap~fortawsome...css type of file, but instead of compiles it straight into app.css with your custom JavaScript. Correct? Hmm. If that's the case, that sounds like some weird, deep behavior: something that would be difficult to track down. My guess is that the SCSS system imports all of that vendor stuff BEFORE webpack becomes aware of it. So by the time Webpack sees all of the content, it's all "coming from app.scss", which is incorrect.

So, unfortunately, I don't have an answer. My best advice is to stick with your workaround, but that's unfortunate!

Cheers!

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.0.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "symfony/asset": "6.0.*", // v6.0.3
        "symfony/console": "6.0.*", // v6.0.3
        "symfony/dotenv": "6.0.*", // v6.0.3
        "symfony/flex": "^2", // v2.1.5
        "symfony/framework-bundle": "6.0.*", // v6.0.4
        "symfony/monolog-bundle": "^3.0", // v3.7.1
        "symfony/runtime": "6.0.*", // v6.0.3
        "symfony/twig-bundle": "6.0.*", // v6.0.3
        "symfony/ux-turbo": "^2.0", // v2.0.1
        "symfony/webpack-encore-bundle": "^1.13", // v1.13.2
        "symfony/yaml": "6.0.*", // v6.0.3
        "twig/extra-bundle": "^2.12|^3.0", // v3.3.8
        "twig/twig": "^2.12|^3.0" // v3.3.8
    },
    "require-dev": {
        "symfony/debug-bundle": "6.0.*", // v6.0.3
        "symfony/stopwatch": "6.0.*", // v6.0.3
        "symfony/web-profiler-bundle": "6.0.*" // v6.0.3
    }
}
userVoice