How to install Symfony encore + bootstrap

Symfony Encore is a powerful tool that simplifies integrating Webpack into your web application. It provides a clean and efficient API for bundling JavaScript modules, pre-processing CSS and JS, and compiling and minifying assets. 

Add encore to composer:

symfony composer require encore

If necessary, update your npm:

nvm install --lts

Now run npm install:

npm install

Install bootstrap:

npm install bootstrap --save-dev

Start your dev server:

npx encore dev-server

Enable the SassLoader on the file webpack.config.js:

// enables Sass/SCSS support
.enableSassLoader()

Install sass loader and sass packages:

// enables Sass/SCSS support
npm install sass-loader@^14.0.0 sass --save-dev

Add bootstrap form theme on the file config\packages\twig.yaml:

twig:
    file_name_pattern: '*.twig'
    form_themes: ['bootstrap_5_layout.html.twig']

Runing the encore server via symfony:

symfony run -d npx encore dev-server

Configure your webpack.config.js to reload live:

.configureDevServerOptions((config) => {
    config.liveReload = true;
    config.static.directory = path.resolve(__dirname, 'templates');
});