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:

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:

// 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:

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:

// 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:

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:

// 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.

<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.