Managing assets
===============

This topic covers the most common cases of managing assets using Webpack.

Importing CSS/SCSS files
------------------------

Let's say you have the following assets directory structure:

.. code-block:: text

    assets/
    ├── shop
    │   ├── styles
    │   │   ├── app.scss
    │   └── entry.js

If you want to add the ``app.scss`` to your build process, you can do it by importing your ``app.scss`` in your ``entry.js`` file:

.. code-block:: javascript

    // assets/shop/entry.js
    import './styles/app.scss';

    // ...

After building, your ``css`` result file (on a default settings) should be available under ``<project_root>/public/build/app/shop/app-shop-entry.css`` path.

Importing images
----------------

Let's say you have the following assets directory structure:

.. code-block:: text

    assets/
    ├── shop
    │   ├── images
    │   │   ├── logo.png
    │   └── entry.js

If you want to add the ``logo.png`` to your build process, you can do it by importing your ``logo.png`` in your ``entry.js`` file:

.. code-block:: javascript

    // assets/shop/entry.js
    import logo from './images/logo.png';

    // ...

After building, your image (with default settings) should be available under ``<project_root>/public/build/app/shop/images/logo.<hash>.png`` path.

.. note::

    You do not need to worry about ``<hash>`` part of the file name. It will be automatically generated by Webpack and handled in Twig by the ``asset()`` function.

Importing fonts
---------------

Let's say you have the following assets directory structure:

.. code-block:: text

    assets/
    ├── shop
    │   ├── fonts
    │   │   ├── roboto.woff
    │   └── entry.js

If you want to add the ``roboto.woff`` to your build process, you can do it by importing your ``roboto.woff`` in your ``entry.js`` file:

.. code-block:: javascript

    // assets/shop/entry.js
    import roboto from './fonts/roboto.woff';

    // ...

After building, your font (on a default settings) should be available under ``<project_root>/public/build/app/shop/fonts/roboto.<hash>.woff`` path.

Using assets in Twig templates
------------------------------

So far, we have seen how to import assets in JavaScript files. But what if you want to use them in Twig templates? The answer is simple: use the ``asset()`` function.

.. code-block:: twig

    <img src="{{ asset('build/app/shop/images/logo.png', 'app.shop') }}" />

So far, when using ``asset()`` function you have been passing only one argument. Using Webpack we need to pass a second argument pointing to our package name from ``framework.assets.package`` configuration.

By default, for ``Sylius Standard``, we configured ``shop`` and ``admin`` packages for Sylius' assets. We also defined ``app.shop`` and ``app.admin`` packages to avoid conflicts between assets' names.