Khandaker Toihidul Islam
Software Engineer
Backend : PHP | Mysql | Symfony | CakePhp | Wordpress | Drupal
Frontend : Node js | Vue js | React Js | Javascript | HTML | CSS | Bootstrap
Tools , Server : Nginx | Apache | Git | Jenkins | Jira | Asana | Silenium | Spira

Config CSS, js, assets, encore, bootstrap

  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

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *