an ``assets/`` directory:

* ``assets/js/app.js``

* ``assets/css/app.scss``

* ``assets/css/app.css``

With Encore, you should think of CSS as a *dependency* of your JavaScript. This means,

you will *require* whatever CSS you need from inside #"diff-885f6ae5827b90e111ec4cc3967ac27115947b60643d0cca2ebc5c83ee575fde-12-12-0" data-selected="false" role="gridcell" tabindex="-1" valign="top">12

..code-block::javascript

With Encore, we can easily minify these files, pre-process ``app.scss``

throughSass and a *lot* more.

With Encore, we can easily minify these files, pre-process ``app.css``

throughPostCSS and a *lot* more.

Configuring Encore/Webpack

This is already a rich setup: it outputs 2 files, uses the Sass pre-processor and

enables source mapsto help debugging.

This is already a rich setup: it outputs 2 files and enables source maps

to help debugging.

.. _encore-build-assets:

Re-run ``encore`` each time you update your ``webpack.config.js`` file.

Actually, to use ``enableSassLoader()``, you'll need to install a few

more packages. But Encore will tell you *exactly* what you need.

After running one of these commands, you can now add ``script`` and ``link`` tags

to the new, compiled assets (e.g. ``/build/app.css`` and ``/build/app.js``).

In Symfony, use the ``asset()`` helper:

Using Sass

Instead of using plain CSS you can also use Sass.

In order to do so, simply change the extension of the ``app.css`` file

to ``.sass`` or ``.scss`` (based on the syntax you want to use):

..code-block::diff

And enable the Sass pre-processor:

..code-block::diff

To use ``enableSassLoader()``, you'll also need to install a few more packages.

But Encore will tell you *exactly* which ones when running it.

Requiring JavaScript Modules