@@ -341,6 +341,47 @@ also shows how you can require multiple packages at once:
341341
342342 $ php bin/console importmap:require highlight.js/lib/core highlight.js/lib/languages/javascript
343343
344+ Global Variables like jQuery
345+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
346+
347+ You might be accustomed to relying on global variables - like jQuery's ``$ ``
348+ variable:
349+
350+ .. code-block :: javascript
351+
352+ // assets/app.js
353+ import ' jquery' ;
354+
355+ // app.js or any other file
356+ $ (' .something' ).hide (); // WILL NOT WORK!
357+
358+ But in a module environment (like with AssetMapper), when you import
359+ a library like ``jquery ``, it does *not * create a global variable. Instead, you
360+ should import it and set it to a variable in *every * file you need it:
361+
362+ .. code-block :: javascript
363+
364+ import $ from ' jquery' ;
365+ $ (' .something' ).hide ();
366+
367+ You can even do this from an inline script tag:
368+
369+ .. code-block :: html
370+
371+ <script type =" module" >
372+ import $ from ' jquery' ;
373+ $ (' .something' ).hide ();
374+ </script >
375+
376+ If you *do * need something to become a global variable, you do it manually
377+ from inside ``app.js ``:
378+
379+ .. code-block :: javascript
380+
381+ import $ from ' jquery' ;
382+ // things on "window" become global variables
383+ window .$ = $;
384+
344385 Handling 3rd-Party CSS
345386----------------------
346387
@@ -713,6 +754,11 @@ component.
713754Using Tailwind CSS
714755------------------
715756
757+ .. seealso ::
758+
759+ Check out `symfonycasts/tailwind-bundle `_ for an even easier way to use
760+ Tailwind with Symfony.
761+
716762Want to use the `Tailwind `_ CSS framework with the AssetMapper component? No problem.
717763First, install the ``tailwindcss `` binary. This can be installed via npm (run
718764``npm --init `` if you don't already have a ``package.json `` file):
@@ -1095,3 +1141,4 @@ This will force the AssetMapper component to re-calculate the content of all fil
10951141.. _BabdevPagerfantaBundle : https://github.com/BabDev/PagerfantaBundle
10961142.. _Cloudflare : https://www.cloudflare.com/
10971143.. _EasyAdminBundle : https://github.com/EasyCorp/EasyAdminBundle
1144+ .. _symfonycasts/tailwind-bundle : https://github.com/SymfonyCasts/tailwind-bundle
0 commit comments