{"id":1776,"date":"2025-11-11T13:35:50","date_gmt":"2025-11-11T12:35:50","guid":{"rendered":"https:\/\/wiki.ad-libitum.info\/?page_id=1776"},"modified":"2025-11-11T17:14:59","modified_gmt":"2025-11-11T16:14:59","slug":"bootstrap-und-fontawesome-hinzufuegen","status":"publish","type":"page","link":"https:\/\/wiki.ad-libitum.info\/?page_id=1776","title":{"rendered":"Bootstrap und FontAwesome hinzuf\u00fcgen"},"content":{"rendered":"\n

Webpack Encore einbinden: composer require symfony\/webpack-encore-bundle<\/code>.<\/p>\n\n\n\n

Bootstrap und Fontawesome installieren: npm install bootstrap @fortawesome\/fontawesome-free --save.<\/code><\/p>\n\n\n\n

Im Root des Projekts die Datei assets\/app.js<\/code> erstellen mit folgendem Inhalt:<\/p>\n\n\n\n

import 'bootstrap\/dist\/css\/bootstrap.min.css';
import '@fortawesome\/fontawesome-free\/css\/all.min.css';
import 'bootstrap'; \/\/ JS f\u00fcr Bootstrap-Komponenten<\/em><\/code>
import _.\/styles\/app.css'; \/\/ <\/em>f\u00fcr die eigene CSS<\/code><\/p>\n\n\n\n

Dann m\u00fcssen im Twig-Template JS und CSS eingebunden werden:<\/p>\n\n\n\n

{{ encore_entry_link_tags('app') }}
{{ encore_entry_script_tags('app') }}<\/code><\/p>\n\n\n\n

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

Im Projektroot die Datei webpack.config.js<\/code> erstellen:<\/p>\n\n\n\n

\/\/ webpack.config.js<\/em>
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();<\/code><\/p>\n\n\n\n

Bei Stimulus, SASS und CSS pr\u00b4\u00fcfen, ob die wirklich gebraucht werden. Wenn nicht, l\u00f6schen oder auskommentieren.<\/p>\n\n\n\n

Die package.json<\/code> im Root muss folgendes enthalten:<\/p>\n\n\n\n

„scripts\": {
    \"dev\": \"encore dev\",
    \"build\": \"encore production\",
    \"watch\": \"encore dev --watch\"
}<\/code><\/p>\n\n\n\n

Die Assets bauen mit:
npm run dev # f\u00fcr Entwicklung<\/em>
npm run build # f\u00fcr Produktion<\/em><\/code><\/p>\n\n\n\n

Nach \u00c4nderungen an der CSS oder JS dran denken, die Assets neu zu bauen!!!<\/p>\n","protected":false},"excerpt":{"rendered":"

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\u00fcr Bootstrap-Komponentenimport _.\/styles\/app.css‘; \/\/ f\u00fcr die eigene CSS Dann m\u00fcssen im Twig-Template JS und CSS eingebunden werden: {{ encore_entry_link_tags(‚app‘) }}{{ encore_entry_script_tags(‚app‘) }} Wenn […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1776","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages\/1776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1776"}],"version-history":[{"count":16,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages\/1776\/revisions"}],"predecessor-version":[{"id":1795,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages\/1776\/revisions\/1795"}],"wp:attachment":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}