diff --git a/frontend.rst b/frontend.rst index 023c81f70b6..5706f64448f 100644 --- a/frontend.rst +++ b/frontend.rst @@ -69,6 +69,7 @@ Guides * :doc:`Using Bootstrap CSS & JS ` * :doc:`Creating Page-Specific CSS/JS ` +* :doc:`Rendering Multiple Templates in a Request: Emails, PDFs ` * :doc:`jQuery and Legacy Applications ` * :doc:`Passing Information from Twig to JavaScript ` * :doc:`webpack-dev-server and Hot Module Replacement (HMR) ` diff --git a/frontend/encore/faq.rst b/frontend/encore/faq.rst index 3c621c3b8d0..8618a69fef3 100644 --- a/frontend/encore/faq.rst +++ b/frontend/encore/faq.rst @@ -78,8 +78,8 @@ like ``/myAppSubdir``), you will need to configure that when calling ``Encore.se + .setManifestKeyPrefix('build') ; -If you're using the ``encore_entry_script_tags()`` and ``encore_entry_link_tags()`` -Twig shortcuts (or are :ref:`processing your assets through entrypoints.json ` +If you're using one of the ``encore_entry_*()`` Twig shortcuts like +``encore_entry_script_tags()`` (or are :ref:`processing your assets through entrypoints.json ` in some other way) you're done! These shortcut methods read from an :ref:`entrypoints.json ` file that will now contain the subdirectory. diff --git a/frontend/encore/file-tracking.rst b/frontend/encore/file-tracking.rst new file mode 100644 index 00000000000..8a559a0d9c1 --- /dev/null +++ b/frontend/encore/file-tracking.rst @@ -0,0 +1,87 @@ +Rendering Multiple Templates in a Request: Emails, PDFs +======================================================= + +When you render your script or link tags with the Twig helper functions +(e.g. ``encore_entry_link_tags()``), WebpackEncoreBundle is smart enough +not to repeat the same JavaScript or CSS file within the same request. +This prevents you from having duplicate ```` or `` + +If you can't use these `encore_entry_*_source` functions, you can instead +manually disable and enable "file tracking": + +.. code-block:: html+twig + + {% do encore_disable_file_tracking() %} + {{ encore_entry_link_tags('entry1') }} + {{ encore_entry_script_tags('entry1') }} + {% do encore_enable_file_tracking() %} + +With this, *all* JS and CSS files for `entry1` will be rendered and +this won't affect any other Twig templates rendered in the request. + +Resetting the File Tracking +--------------------------- + +If using ``encore_disable_file_tracking()`` won't work for you for some +reason, you can also "reset" EncoreBundle's internal cache so that the +bundle re-renders CSS or JS files that it previously rendered. For +example, in a controller:: + + + // src/Controller/SomeController.php + + use Symfony\WebpackEncoreBundle\Asset\EntrypointLookupInterface; + + class SomeController + { + public function index(EntrypointLookupInterface $entrypointLookup) + { + $entrypointLookup->reset(); + // render a template + + $entrypointLookup->reset(); + // render another template + + // ... + } + } + +If you have multiple builds, you can also autowire +``Symfony\WebpackEncoreBundle\Asset\EntrypointLookupCollectionInterface`` +and use it to get the ``EntrypointLookupInterface`` object for any build. + +.. _`inline_css`: https://github.com/twigphp/cssinliner-extra diff --git a/mailer.rst b/mailer.rst index b2ffbb46c85..964b7e7f7c5 100644 --- a/mailer.rst +++ b/mailer.rst @@ -464,6 +464,22 @@ called ``css`` that points to the directory where ``email.css`` lives: # point this wherever your css files live '%kernel.project_dir%/assets/css': css +Using Encore CSS Files +~~~~~~~~~~~~~~~~~~~~~~ + +If you're using :ref:`Webpack Encore `, you can also +include the CSS from your built files. Suppose you create an ``email`` entry to +contain your email styles: + +.. code-block:: html+twig + + {% apply inline_css(encore_entry_css_source('email')) %} +

Welcome {{ username }}!

+ {# ... #} + {% endapply %} + +Any CSS for your ``email`` entry will now be included and inlined. + .. _mailer-markdown: Rendering Markdown Content