Hallo zusammen,
ich wollte ein paar Dinge zum Überschreiben von Bootstrap Variablen erläutern.
Generell funktionieren in Bootstrap 4 die default variablen mit SCSS etwas anders, als z.B. in älteren Bootstrap Versionen mit LESS oder Shopware 5 ohne Bootstrap. Deshalb funktionierte der Shopware 5 Weg “Ich mappe einfach @variable-x um” nicht wie erwartet.
Bootstrap 4 verwendet in SCSS das !default flag für Default Variablen. Das sorgt dafür, dass globale Overrides über mehrere SCSS Dateien hinweg VOR dem eigentlichen Bootstrap SCSS kommen müssen. Siehe Bootstrap Dokumentation:
https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults
In Shopware 6 würde das dann wie folgt aussehen: Zunächst wird in der _ theme.json _ eine _ overrides.scss _ definiert, welche vor der Storefront geladen wird. So kann der von Bootstrap gewünschte Workflow sichergestellt werden:
{
"name": "MyTheme",
"author": "Shopware AG",
"views": [
"@Storefront",
"@Plugins",
"@MyTheme"
],
"style": [
"app/storefront/src/scss/overrides.scss",
In der _ overrides.scss _ können die Bootstrap und Storefront Default variablen mit _ !default _ flags global überschrieben werden (z.B. _ $border-radius _). Versucht man die Variablen in der _ base.scss _ zu überschreiben hat die Änderung keine Auswirkung, da sie nach Bootstrap geladen werden.
Mehr zum Thema SCSS default variables: https://sass-lang.com/documentation/variables#default-values
Beispiel overrides.scss
/*
Override variable defaults
==================================================
This file is used to override default SCSS variables from the Shopware Storefront or Bootstrap.
Because of the !default flags, theme variable overrides have to be declared beforehand.
https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults
*/
$disabled-btn-bg: #f00;
$disabled-btn-border-color: #fc8;
$font-weight-semibold: 300;
$border-radius: 0;
$icon-base-color: #f00;
$modal-backdrop-bg: rgba(255, 0, 0, 0.5);
Da das zugegebenermaßen nicht so intuitiv ist, wie eine Variable einfach rückwirkend umzumappen, werden wir in Zukunft die overrides.scss (Mit doc block) neben der _ base.scss _ mit dem _ theme:create _ Befehl generieren.
Was Ihr außerdem beachten solltet, ist, dass Ihr in der overrides.scss wirklich nur Variablen überschreibt und keinen CSS Code wie .container { background: blue } erstellt. Für den Development Modus (File Watcher / Hot Module Replacement) werden später die Variablen über Webpack dynamisch hinzugefügt, was im Grunde mit einem “import” zu vergleichen ist. Das würde bedeuten, dass _ .container { background: blue } _ in alle SCSS importiert wird und entsprechend mehrere Male im gebauten CSS auftaucht.
Das Überschreiben der Default Variablen funktioniert ab der Version 6.1-RC4 oder auf dem aktuellen 6.1 branch. Leider gibt es aktuell noch Probleme beim Überschreiben der Variablen im Dev-Modus (Watcher). Hier werden die Änderungen nocht nicht angezeigt, wir versuchen das schnellstmöglich zu beheben. Den generellen Workflow könnt ihr aber trotzdem schon verwenden.
Viele Grüße
Tobias