Using Webpack Encore in Sylius¶
This is a simple guide on how to start using webpack in Sylius apps. Webpack finally lets us easily customize Sylius assets.
1. Install webpack-encore-bundle:
composer require symfony/webpack-encore-bundle
2. Edit the config/packages/assets.yaml
file:
framework:
assets:
packages:
shop:
json_manifest_path: '%kernel.project_dir%/public/build/shop/manifest.json'
admin:
json_manifest_path: '%kernel.project_dir%/public/build/admin/manifest.json'
3. Edit the config/packages/webpack_encore.yaml
file:
webpack_encore:
output_path: '%kernel.project_dir%/public/build/default'
builds:
shop: '%kernel.project_dir%/public/build/shop'
admin: '%kernel.project_dir%/public/build/admin'
4. Overwrite template files and add new assets paths for admin and shop:
// templates/bundles/SyliusAdminBundle/_scripts.html.twig
{{ encore_entry_script_tags('admin-entry', null, 'admin') }}
// templates/bundles/SyliusAdminBundle/_styles.html.twig
{{ encore_entry_link_tags('admin-entry', null, 'admin') }}
// templates/bundles/SyliusAdminBundle/Layout/_logo.html.twig
<a class="item" href="{{ path('sylius_admin_dashboard') }}" style="padding: 13px 0;">
<div style="max-width: 90px; margin: 0 auto;">
<img src="{{ asset('build/admin/images/admin-logo.svg', 'admin') }}" class="ui fluid image">
</div>
</a>
// templates/bundles/SyliusAdminBundle/Security/_content.html.twig
{% include '@SyliusUi/Security/_login.html.twig'
with {
'action': path('sylius_admin_login_check'),
'paths': {'logo': asset('build/admin/images/logo.png', 'admin')}
}
%}
// templates/bundles/SyliusShopBundle/_scripts.html.twig
{{ encore_entry_script_tags('shop-entry', null, 'shop') }}
// templates/bundles/SyliusShopBundle/_styles.html.twig
{{ encore_entry_link_tags('shop-entry', null, 'shop') }}
// templates/bundles/SyliusShopBundle/Layout/Header/_logo.html.twig
<div class="column">
<a href="{{ path('sylius_shop_homepage') }}">
<img src="{{ asset('build/shop/images/logo.png', 'shop') }}" alt="Sylius logo" class="ui small image" />
</a>
</div>
Warning
The paths should be changed for each asset you use.
5. To build the assets, run:
yarn encore dev
# or
yarn encore production
# or
yarn encore dev-server
Tip
When compiling assets, errors may appear (they don’t break the build), due to different babel configuration for gulp
and webpack. Once you decide to use the webpack you can delete the gulpfile.babel.js
and .babelrc
from the root
directory - then the errors will stop appearing.