- Install encore
composer require symfony/webpack-encore-bundle
yarn install
Now we can see the asset folder in the root directory
Install bootstrap
yarn add bootstrap --dev
yarn add jquery popper.js --dev
Import bootstrap
1. Import Bootstrap CSS into assets/css/app.css
@import "~bootstrap/dist/css/bootstrap.css";
2. Import bootstrap js into assets/css/app.js
require('../css/app.css');
const $ = require('jquery');
require('bootstrap');
3. Install twig and implement encore
composer require twig
Include style and javascript to template/base.html.twig
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
#compile assets once
yarn encore dev
#recompile assets automatically when files changes
yarn encore dev --watch
# on deploy, create a production build