Zur Übersicht
Jürgen Schwind 24 Nov 2025 symfony, bootstrap, scss, php, scssphp, bundle
JBSNewMedia Bootstrap Bundle: SCSS ohne Node, direkt in Symfony

JBSNewMedia Bootstrap Bundle: SCSS ohne Node, direkt in Symfony

Warum noch ein Bootstrap‑Bundle?

Wer in Symfony Projekte Bootstrap anpasst, landet schnell bei SCSS. Häufig zieht man dafür Node‑basierte Toolchains heran – muss man aber nicht. Das neue JBSNewMedia Bootstrap Bundle setzt komplett auf PHP und nutzt scssphp zum Kompilieren der Styles. Ergebnis: weniger Setup‑Aufwand, keine zusätzliche Runtime, klare Defaults.

Features im Überblick

  • Sofort einsatzbereite SCSS‑Einträge (light und dark)
  • SCSS ➝ CSS via scssphp (reines PHP, kein Node nötig)
  • Import‑Pfad‑Vorkonfiguration für vendor/twbs/bootstrap/scss
  • Optionale Source Maps (--source-map)
  • Sinnvolle Defaults: komprimierter Output, Standardpfade

Anforderungen

  • PHP ≥ 8.2
  • Symfony 6.4 oder 7.x (framework‑bundle, console)
  • Composer
  • Abhängigkeiten: twbs/bootstrap (≥ 5.3), scssphp/scssphp (getestet ab ≥ 1.12)

Hinweis: Das Bundle ist ein reguläres Symfony‑Bundle und wird über den Kernel automatisch registriert.

Installation

composer require jbsnewmedia/bootstrap-bundle

Composer zieht – falls noch nicht vorhanden – die benötigten Pakete (twbs/bootstrap, scssphp/scssphp).

Nutzung in 2 Schritten

1) SCSS‑Einträge anlegen

php bin/console bootstrap:init
# Vorschau ohne Schreiben
php bin/console bootstrap:init --dry-run
# Bestehende Dateien überschreiben
php bin/console bootstrap:init --force

Erstellt werden standardmäßig:

  • assets/scss/bootstrap5-custom.scss
  • assets/scss/bootstrap5-custom-dark.scss

Beide Einträge importieren Bootstrap nach deinen Variablen‑Overrides in korrekter Reihenfolge.

2) SCSS ➝ CSS kompilieren

php bin/console bootstrap:compile

Defaults:

  • Input: assets/scss/bootstrap5-custom.scss
  • Output: assets/css/bootstrap.min.css
  • Output‑Style: compressed

Source Map erzeugen:

php bin/console bootstrap:compile --source-map

Eigene Pfade:

php bin/console bootstrap:compile path/to/entry.scss public/css/app.css

Kommando‑Referenz

bootstrap:init

Scaffoldet Bootstrap‑SCSS‑Einträge.

  • Optionen:
  • --dry-run – zeigt anstehende Änderungen ohne zu schreiben
  • -f, --force – überschreibt vorhandene Dateien
  • Alias: boostrap:init (häufiger Tippfehler)

Die folgenden Dateien werden in assets/scss/ angelegt:

  • bootstrap5-custom.scss (light)
  • bootstrap5-custom-dark.scss (dark)

Empfohlene Reihenfolge in den Dateien: functions → eigene Variablen → Bootstrap‑Import.

bootstrap:compile

Kompiliert SCSS zu CSS mit scssphp.

  • Argumente:
  • input (optional) – SCSS‑Entry; Default assets/scss/bootstrap5-custom.scss
  • output (optional) – CSS‑Zieldatei; Default assets/css/bootstrap.min.css
  • Optionen:
  • --source-map – schreibt eine .map neben die CSS‑Datei

Vorkonfigurierte Include‑Pfade (in dieser Reihenfolge):

  1. vendor/twbs/bootstrap/scss
  2. vendor
  3. assets/scss
  4. assets

Damit sind Imports wie diese ohne Relativpfade möglich:

@import "functions";
@import "variables";
@import "bootstrap";

Source‑Map‑Verhalten

Mit --source-map wird die Map nach der Kompilierung gespeichert, z. B.:

  • CSS: assets/css/bootstrap.min.css
  • Map: assets/css/bootstrap.min.css.map

Beispielausgabe:

Compiled assets/scss/bootstrap5-custom.scss -> assets/css/bootstrap.min.css
Source map written: assets/css/bootstrap.min.css.map

Beispiel‑SCSS

Light (erstellt durch bootstrap:init):

// Projektweite Bootstrap-Konfiguration
// -----------------------------------
// Reihenfolge: zuerst functions, dann Variable-Overrides,
// am Ende Bootstrap importieren.

// 1) Bootstrap functions (für Variablen‑Berechnungen)
@import "functions";

// 2) Eigene Variablen (ohne !default, damit sie greifen)
$primary: #ff0000;

// 3) Optional: Bootstrap‑Basisvariablen
@import "variables";

// 4) Komplettes Bootstrap importieren
@import "bootstrap";

Dark (erstellt durch bootstrap:init):

// Dark-Mode Build für Bootstrap
// -----------------------------------
// 1) Bootstrap functions
@import "functions";

// 2) Dark‑spezifische Variablen
$body-bg: #121212;
$body-color: #e6e6e6;
$primary: #0d6efd;

// Optional: zusätzliche Maps/Variablen
@import "variables";

// 3) Komplettes Bootstrap
@import "bootstrap";

Troubleshooting

  • Input‑Datei nicht gefunden
  • php bin/console bootstrap:init ausführen, um Standard‑Entries zu erzeugen, oder eigenen Pfad an bootstrap:compile übergeben.
  • Bootstrap‑Imports werden nicht aufgelöst
  • Prüfen, ob twbs/bootstrap installiert ist: composer require twbs/bootstrap.
  • Source‑Map‑Kommentar vorhanden, aber keine Datei geschrieben
  • Die Map wird am Ende des Builds geschrieben. Prüfe, ob --source-map gesetzt ist und die SCSS‑Quelle tatsächlich Output erzeugt.
  • scssphp Versionen
  • Seit scssphp ≥ 1.12 liegen Source‑Map‑Konstanten auf Compiler. Das Bundle ist darauf ausgelegt.

Fazit

Das JBSNewMedia Bootstrap Bundle ist ideal, wenn du Bootstrap‑SCSS in Symfony ohne Node‑Toolchain bauen möchtest. Einfache Kommandos, sinnvolle Defaults und Vendor‑aware Importpfade sorgen für einen schnellen, zuverlässigen Workflow – rein mit PHP.

Links