Bootstrap Variablen überschreiben

Bildquelle: Bootstrap

Inhaltsverzeichnis:

Vorhandene Bootstrap Variablen zu überschreiben ist eigentlich ziemlich einfach. Alles was du dafür brauchst ist eine "deinstyle.scss" Datei.

In diese musst du nun zuerst die Bootstrap Sass-Dateien importieren. Dafür hast du zwei Optionen.

// deinstyle.scss
// Option 1: Include all of Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

// Option 2: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

Wenn du beispielweise Farben überschreiben möchtest brauchst du eigentlich nur

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";

Nachdem diese Variablen importiert wurden kannst du diese in deiner Datei nun überschreiben. Im folgenden Beispiel wird die Schriftart, die Hintergrundfarbe und die Farbe der Schrift geändert.

@import url('https://fonts.googleapis.com/css?family=Muli');
body {
    font-family: 'Muli', sans-serif !important;
    
}

$body-bg: #fafafa !important;
$body-color: rgb(36, 39, 41) !important;

Nun musst du nurnoch die restlichen Variablen mit @import "node_modules/bootstrap/scss/bootstrap"; wieder importieren.

Deine ganze "deinstyle.scss" Datei sollte nun wie folgt ausschauen:

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";

@import url('https://fonts.googleapis.com/css?family=Muli');
body {
    font-family: 'Muli', sans-serif !important;
    
}

$body-bg: #fafafa !important;
$body-color: rgb(36, 39, 41) !important;

@import "node_modules/bootstrap/scss/bootstrap";

Diese Datei musst du jetzt noch in dein Layout mit htmlimport "./deinstyle.scss" importieren und nun sollte sich deine Schriftart, die Hintergrundfarbe und Farbe der Schrift geändert haben.

Falls du die Meldung You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders bekommst musst du noch Webpack konfigurieren, sodass die .scss Dateien geladen werden können. Für Gatsby gibt es dafür das Plugin gatsby-plugin-sass

Mehr Informationen wie du Bootstrap modifizieren kannst findest du unter Bootstrap Theming.

Vorheriger Beitrag:

Die 10 besten Serien aller Zeiten auf Netflix

Nächster Beitrag:

Migration von WordPress nach Gatsby