Bootstrap und FontAwesome hinzufügen

Webpack Encore einbinden: composer require symfony/webpack-encore-bundle.

Bootstrap und Fontawesome installieren: npm install bootstrap @fortawesome/fontawesome-free --save.

Im Root des Projekts die Datei assets/app.js erstellen mit folgendem Inhalt:

import 'bootstrap/dist/css/bootstrap.min.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap'; // JS für Bootstrap-Komponenten
import _./styles/app.css'; // für die eigene CSS

Dann müssen im Twig-Template JS und CSS eingebunden werden:

{{ encore_entry_link_tags('app') }}
{{ encore_entry_script_tags('app') }}

Wenn es im Projektroot keine package.json gibt, muss mit composer require symfony/webpack-encore-bundle Webpack installiert und mit npm install initialisiert werden.

Im Projektroot die Datei webpack.config.js erstellen:

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .enableStimulusBridge('./assets/controllers.json')
    .enableSassLoader()
    .enablePostCssLoader()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSingleRuntimeChunk()
;

module.exports = Encore.getWebpackConfig();

Bei Stimulus, SASS und CSS pr´üfen, ob die wirklich gebraucht werden. Wenn nicht, löschen oder auskommentieren.

Die package.json im Root muss folgendes enthalten:

„scripts": {
    "dev": "encore dev",
    "build": "encore production",
    "watch": "encore dev --watch"
}

Die Assets bauen mit:
npm run dev # für Entwicklung
npm run build # für Produktion

Nach Änderungen an der CSS oder JS dran denken, die Assets neu zu bauen!!!