Keine Ahnung ob du das so machen musst. Kenne mich damit nicht aus.
Bei Zeit kann da sicherlich mal ein Entwickler draufschauen, der es weißt. Kann das da nur weitergeben.
[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski “Moritz Naczenski”) ja das wäre super, es gibt nämlich auch keine Doku dafür…
achso… ich muss also doch wieder Daten aus dem original Theme kopieren… das ist das was du oben meintest…
Das ist lediglich die Core Bootstrap Datei, mehr nicht. Diese Datei zieht sich dann nur die core Bootstrap Files. Mehr beinhaltet die Datei ja nicht. Kanst dir ja auch eine eigene anlegen und die foo.less nennen. Wichtig ist nur das du eben dann die core bootstrap files importierst => https://github.com/shopware/platform/blob/master/src/Storefront/Resources/src/style/vendor/_bootstrap.scss
ich hab jetzt beide importiert bzw. die beiden Imports aus beiden Dateien von Github kopiert
@import "~vendor/bootstrap/scss/bootstrap";
@import "~vendor/tiny-slider/src/tiny-slider";
aber dann kann ich es gar nicht mehr compilieren … man nervt das schon wieder … “in SW5 war alles besser”
oder brauch ich diesen . /…/…/…/…/…/…/…/platform/src/Storefro… Pfad den du hast?
ich hab allerdings diese Ordnerstruktur mit “platform” gar nicht…?
EDIT: hab den Import mal geändert auf
@import "../../../../../../../vendor/shopware/storefront/Resources/vendor/bootstrap/scss/bootstrap";
den gibts zumindest und die Datei ist auch da. Allerdings verursacht auch das einen Compilefehler im Theme… vermutlich weil in der Datei wiederum Imports drin sind?
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
...
dort stimmen die Pfade dann natürlich wieder nicht…
wenn ich direkt das importiere, dann lässt es sich zumindest kompilieren … :
@import "../../../../../../../vendor/shopware/storefront/Resources/vendor/bootstrap/scss/variables";
… aber muss ich jetzt alle Dateien einzeln importieren?
jedoch ändert auch der Import von der variables-Datei nichts daran, dass ich den Radius nicht überschreiben kann…
@Shopwareianer kannst du nochmal helfen?
@FloC3
Hallo. die möglichkeit für das überschreiben der bootstrap variablen kommt erst noch (alle mal voten bitte :).
Shopware Issuetracker
bezgl. der imports der ganzen files für angenehmes arbeiten musst du eigentlich nur die shopware base importieren, diese importiert ja alles andere.
@import “…/…/…/…/…/…/…/vendor/shopware/storefront/Resources/src/style/base”;
voraussetzung ist dann aber die anpassung der Tilde in den shopware imports vom tinyslider und bootstrap und in den variables. die macht da den alarm beim kompilieren.
[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski “Moritz Naczenski”) wäre shopware-seitig schön wenn ihr euer zeugs ohne tilde importieren würdet.
das wäre für die themeentwicklung einfacher.
glaube das müsste man bei updates ja immer erneut anpassen.
gruß
Hallo zusammen,
gibts von Seiten Shopware zu dem Thema „Überschreiben der Bootstrap-Variablen im Theme“ ein offizielles Statement von Shopware? [@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski „Moritz Naczenski“) ?
ich würde das gern lösen bzw. ich brauch eine Lösung dafür…
1 „Gefällt mir“
Push
Suche hier auch eine Lösung.
gibts von Seiten Shopware zu dem Thema „Überschreiben der Bootstrap-Variablen im Theme“ ein offizielles Statement von Shopware? @Moritz Naczenski ?
ich würde das gern lösen bzw. ich brauch eine Lösung dafür…
Hallo,
bei mir funktioniert das kompilieren von scss Datein im rc1 nicht mehr (php bin/console theme:compile). Das hat im ea2 funktioniert.
Auch das Überschreiben von Variablen tut nicht. Müssen die scss Datein explizit unter theme.json eingebunden werden?
Danke und gruß
es funktioniert doch, ich hatte ein anderes Theme ausgewählt …
gibts von Seiten Shopware zu dem Thema „Überschreiben der Bootstrap-Variablen im Theme“ ein offizielles Statement von Shopware? @Moritz Naczenski ?
ich würde das gern lösen bzw. ich brauch eine Lösung dafür…
Ist auf der Roadmap unter Theme Handling
https://www.shopware.com/de/roadmap/
1 „Gefällt mir“
Oh Krass. Auch mal gut zu wisssen … Gefühlt 10 Beiträge mit derselben Frage und keine Antwort, jetzt stehts aber aufer Roadmap …
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
3 „Gefällt mir“
Hallo,
das mit dem Überschreiben auf die Art mittels overrides.scss funktioniert jetzt! Aber wie bekomm ich da jetzt eine Variable aus meinem eigenen Theme rein?
"fields": {
"sw-my-border-radius": {
"label": {
"en-GB": "Border-Radius",
"de-DE": "Border-Radius"
},
"type": "number",
"value": "0",
"editable": true,
"block": "general"
}
}
wie bekomm ich also die Variable " sw-my-border-radius" jetzt ins SCSS? Wenn ich einfach $sw-my-border-radius nehme, bekomm ich einen Compile-Error “undefined variable”.
kann [@Tobias Berge](http://forum.shopware.com/profile/20591/Tobias Berge “Tobias Berge”) hier evtl. nochmal helfen?
dito
@FloC3
“type”: “number” gibts “noch immer” nicht wenn ich mich nicht irre.
Oder wo hast du das her?
Hallo @thom ich weiß, das gibt es nicht aber ich habs einfach mal probiert. Es ist zwar dann kein Number-Feld aber zumindest ein normales Textfeld wo ich was eintragen kann…
ändert aber leider nix am ursprünglichen Problem, dass ich die Variable nicht ins SCSS bekomme…
@FloC3 ich glaube wir müssen weiterhin einfach nur geduldig sein. 
Das Themehandling ist ja laut Roadmap in der Mache.
Ich vermute mal so ab März könnte da was gehen.
Gruß