Diese Woche möchte ich euch zeigen wie ihr euch mit minimalem Aufwand Bootstrap v4 selbst kompilieren könnt – für den Fall dass ihr (wie ich) kein Fan von Grunt und den üblichen Build-Tools seid.
Wir werden dafür lediglich eine SASS Compiler Bibliothek (leafo/scssphp) verwenden.

ACHTUNG – es gibt einen aktuelleren Beitrag zum Thema Bootstrap v5 manuell kompilieren

Auf dem neusten Stand mit Bootstrap v4

Seit Oktober ist Bootstrap v4 in der zweiten Beta Version verfügbar. „Demnächst“ soll auch die dritte Beta und im Anschluss die Finale Version veröffentlicht werden 🙂 Zeit also, das wir uns mit dieser Version des bekannten CSS Frameworks bekannt machen und eigene Designs entwickeln!

Der SASS Compiler

Das erste was wir benötigen ist ein CSS Compiler. Da mit Bootstrap v4 das Team von LESS auf SASS gewechselt hat, suchen wir uns etwas entsprechendes aus dem Composer Repository.

Ich habe hier mit dem Suchstring „Sass“ leafo/scssphp gefunden. Der Compiler wurde bereits mehr als 2,06 Millionen mal heruntergeladen!

Ich benutze die Konsole um den Code via Composer zu laden:

$ composer require leafo/scssphp

Anschließend bauen wir uns eine rudimentäre compile.php Datei und folgen dem Beispiel-Code der scssphp Webseite.

include 'vendor/autoload.php';

use Leafo\ScssPhp\Compiler;

$scss = new Compiler();

echo $scss->compile(file_get_contents('path/to/bootstrap.scss'));

Formatter und Import Pfade

Um als Ergebnis eine normale oder möglichst kleine CSS Datei zu erhalten können wir die mitgelieferten Formatter benutzen:

• Expanded
  Liefert eine ganz normale und unkomprimierte CSS Datei zurück.
• Nested (Standard)
  Ähnlich wie Expanded, nur werden bei dieser Option die CSS Regeln weiter eingerückt, je spezifischer diese werden.
• Compact
  CSS Regeln und Definitionen werden jeweils in eine Zeile zusammenfasst.
• Compressed
  Die komplette CSS Datei wird komprimiert und in eine Zeile zusammengeasst.
• Crunched
  Ähnlich wie Compact, nur werden hierbei sämtliche Kommentare entfernt.

Weiterhin benötigt der Compiler einen (oder mehrere) „Import Pfade“, da in den SASS Dateien mit der @import Direktive gearbeitet wird. Hier übergeben wir den Pfad in denen sich die entsprechenden SCSS Dateien befinden (ähnlich einem Autoloader).

Das compiler.php Skript sollte nun in etwa so aussehen:

include 'vendor/autoload.php';

use Leafo\ScssPhp\Compiler;
use Leafo\ScssPhp\Formatter\Compressed;

$scss = new Compiler();
$scss->setImportPaths('path/to/scss');
$scss->setFormatter(new Compressed());

echo $scss->compile(file_get_contents('path/to/bootstrap.scss'));

Auf der Webseite finden wir darüber hinaus noch einige andere Methoden und Optionen.

Dateistruktur und angepasste Variablen

Zunächst laden wir uns auf der offiziellen Bootstrap Seite die aktuellste ZIP runter. In dieser ZIP Datei finden wir einen Ordner „scss“ – diesen schnappen wir uns und kopieren ihn in das Verzeichnis, in dem auch die compiler.php liegt.

Der Ordner sollte nun so aussehen:

bootstrap-compiler/
├─ scss/
│   └─ ...
├─ vendor/
│   └─ ...
├─ compiler.php
├─ composer.json
└─ composer.lock

Theoretisch sind wir an diesem Punkte schon fertig. Wir können die Variablen in scss/_variables.scss nach belieben anpassen und uns eine ganz eigene Bootstrap CSS Datei kompilieren, indem wir die compiler.php Datei ausführen (egal ob über Konsole oder Browser)!

Oder, noch besser…

Um die Bootstrap eigenen Dateien nicht zu verändern (denkt an Updatesicherheit!) sollten wir diese durch eine eigene SCSS Datei überschreiben. Dazu kopieren wir uns scss/_variables.scss in einen eigenen Ordner und führen in der eigenen Kopie alle nötigen Änderungen durch.

Ich habe dafür eine neue build.scss Datei angelegt und folgende Änderung am Skript und im Dateisystem vorgenommen:

include 'vendor/autoload.php';

use Leafo\ScssPhp\Compiler;
use Leafo\ScssPhp\Formatter\Compressed;

define('CUSTOM_STILES_PATH', __DIR__ . '/scss/');
define('BOOTSTRAP_PATH', __DIR__ . '/vanilla-bootstrap/');

$scss = new Compiler();
$scss->setImportPaths([CUSTOM_STILES_PATH, BOOTSTRAP_PATH]);
$scss->setFormatter(new Compressed());

$bootstrapScss = $scss->compile(file_get_contents(CUSTOM_STILES_PATH . 'build.scss'));

file_put_contents('my-bootstrap-min.css', $bootstrapScss);

bootstrap-compiler/
├─ scss/
│   ├─ _variables.scss
│   └─ build.scss
├─ vanilla-bootstrap/
│   └─ ...
├─ vendor/
│   └─ ...
├─ compiler.php
├─ composer.json
└─ composer.lock

Der Inhalt unserer build.scss Datei besteht aus zwei einfachen Zeilen:

@import "variables";
@import "../vanilla-bootstrap/bootstrap";

Wir importieren also einfach unsere eigenen Variablen vor bootstrap selbst.

Das frisch kompilierte CSS landet jetzt außerdem in einer Datei: my-bootstrap-min.css.

Nun können wir bedenkenlos eigene Bootstrap Designs erstellen ohne die originalen Dateien zu verändern! Der Benefit: auch neuere Bootstrap Versionen sollten ohne Komplikationen auf diesem Weg kompiliert werden können – wir brauchen dazu lediglich die Dateien in vanilla-bootstrap auszutauschen 🙂

Schaut euch auch unbedingt die Bootswatch Seite an. Von dort habe ich mir die Methode abgeschaut die bootstrap Variablen zu überschreiben.

Ich hoffe ich konnte euch Heute etwas neues zeigen und dabei Helfen eigene Designs zu realisieren die nicht direkt nach 0-8-15 Bootstrap aussehen 😉 Bis zum nächsten mal Wünsche ich euch wie immer Happy Coding!

UPDATE 09.Mai 2019

Leider gab es in vergangenen Versionen von leafo/scssphp Probleme im Zusammenspiel mit Bootstrap 4.1.*, diese Probleme sind im aktuellsten Release (aktuell v0.8.0) zwar behoben, doch diese Version ist leider noch nicht via Composer verfügbar. Hier müsst ihr dann vorübergehend die Version auf dev-master setzen, also:

composer req leafo/scssphp dev-master