Bootstrap Theme for Sylius
Sylius Bootstrap theme with build process based on Webpack Encore.It allows to swap to Bootstrap-based theme separately in each channel.
There are two ways to install a theme. It is possible to copy files in
themes/ or add this package as a composer dependency and create a child theme.
The instructions below refer to an installation in the theme folder. Installation as a composer dependency (with child theme) is also documented.
Branch 0.1.x is only compatible with Sylius 1.6. Master is compatible with Sylius >= 1.7.0.
Copy files from repository to
composer require encore
Install node dependencies
yarn yarn add @symfony/webpack-encore sass-loader@^7.0.0 node-sass lodash.throttle -D yarn add bootstrap@^4.5.0 bootstrap.native@^3.0.0 glightbox axios form-serialize @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons
Import bootstrap-theme config in the main webpack file
# ./webpack.config.js const Encore = require('@symfony/webpack-encore'); const bootstrapTheme = require('./themes/BootstrapTheme/webpack.config'); module.exports = [bootstrapTheme];
Edit project config files
# ./config/packages/assets.yaml framework: assets: packages: bootstrapTheme: json_manifest_path: '%kernel.project_dir%/public/bootstrap-theme/manifest.json'
# ./config/packages/webpack_encore.yaml webpack_encore: output_path: '%kernel.project_dir%/public/build' builds: bootstrapTheme: '%kernel.project_dir%/public/bootstrap-theme'
To build the assets, run one of the following commands
# compile assets once yarn encore dev # recompile assets automatically when files change yarn encore dev --watch # recompile assets automatically with live reload yarn encore dev-server # create a production build yarn encore production
Change theme in the admin panel by visiting the Edit Channel page