Комментарии к публикации
Вебпак и загрузка стилей

./node_modules/.bin/encore dev - выполняя данную команду ничего не происходит и терминал ругается на точку.
Если же выполнить данную команду npm run dev, то файлы компилируются.

Почему так?

Error: ./node_modules/bootstrap/dist/js/bootstrap.min.js Error: Can't resolve 'jquery' in '/var/www/sites/edu/symfony4.loc/node_modules/bootstrap/dist/js'

npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of popper.js@^1.14.7 but none is installed. You must install peer dependencies yourself.

npm install [email protected]
npm install popper.js@^1.14.7

./node_modules/.bin/encore dev

Error: ./node_modules/bootstrap/dist/js/bootstrap.min.js Error: Can't resolve 'jquery' in '/var/www/sites/edu/symfony4.loc/node_modules/bootstrap/dist/js'

npm install jquery
npm install popper.js

./node_modules/.bin/encore dev

Build successful

Но стили bootstrapa так и не внедрились в страницу и не появились в папке public/build - там остался тот же самый app.css с несколькими строками
Правда появились папки vendors~js и vendors~css

Я подключил вот так - <link rel="stylesheet" href="{{ asset('build/vendors~css/app.css') }}">
и bootstrap-стили сработали. Но мои стили - нигде не проявляются

Попробовал поменять очереедность:

.addEntry('js/app', [
        './node_modules/bootstrap/dist/js/bootstrap.min.js',
        './assets/js/app.js'
    ])
    .addStyleEntry('css/app', [
        './node_modules/bootstrap/dist/css/bootstrap.min.css',
        './assets/css/app.css'
    ])

Это не помогло.

Вернул <link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
Там опять таки только мои стили, без bootstrap

[serge@serge symfony4.loc]$ ./node_modules/.bin/encore dev
Running webpack ...

 DONE  Compiled successfully in 1860ms                                                                                                                                                                                               16:11:03

 I  7 files written to public/build
Entrypoint js/app [big] = runtime.js vendors~js/app.js js/app.css js/app.js
Entrypoint css/app [big] = runtime.js vendors~css/app.css vendors~css/app.js css/app.css

"_Поэтому запускать вы можете так: ./nodemodules/.bin/encore dev" -ерунда, это вообще не команда.
если уж на то пошло то: cd node_modules/.bin && encore dev
--но это дает ошибку. Правильно получилось когда сделал по "родной" симфони документации: поставил Yarn (глобально, так сам выбрал) и потом просто в корне проекта: yarn encore dev
--и нормально пробилдилось.

Если тоже ничего не получается и ошибки лезут уже из под крышки ноута, то Вам сюда -> https://symfony.com/doc/current/the-fast-track/ru/22-encore.html

P.S. Проходя этот курс не нужно скупиться на git commit

Если по какой-то причине webpack ругается, что нет какого-то файла, открываем терминал в /node_modules/bootstrap и выполняем команду
npm install
npm установит необходимые для bootstrap зависимости.
Далее открываем терминал в папке проекта и выполняем команду
./node_modules/.bin/encore dev
Видим на экране монитора
webpack compiled successfully
и радуемся жизни!

Для нормального отображения форм в twig предусмотрен шаблон форм с поддержкой bootstrap, для этого в конфигурационный файл config/packages/twig.yaml нужно прописать twig:
form_themes: ['bootstrap_4_layout.html.twig'].

Ругаться больше нету сил... (с)

Encore - это "обёртка" Симфони для пакета Webpack.
Сам Webpack использует npm.

Symfony 6.1

1. Ставим npm
2. где-то в доке вычитал, что Симфони "любит" yarn, поэтому тоже поставил
3. ставим Encore
4. тут офиц. док-ция тоже не без греха - больше ничего руками делать не надо: файлы webpack.config.js и assets/styles/app.css уже созданы

Собс-но всё...
bootstrap подключён, свои стили пишем в assets/styles/app.css...

Не забываем после изменения их компилировать:
./node_modules/.bin/encore dev

Кстати, результат можно посмотреть в public/build/...

Symfony 6.1

Подключение Bootstrap:

1. Ставим Bootstrap

   npm install bootstrap --save-dev

2. Переименовываем app.css в app.scss. В нём добавляем

   @import "~bootstrap/scss/bootstrap";

3. В webpack.config.js включаем загрузку Sass

4. Внимательно читаем на что ругается ( там д.б. строка с установкой sass-loader)

   ./node_modules/.bin/encore dev