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

By toihid

Leave a Reply