Bootstrap Variablen im eigenen Theme überschreiben

Shopware 6 (German) Themes & Design
1

Wie kann ich die allgemeinen Bootstrap Variablen in meinem Theme überschreiben?

In der variables.scss meines Theme-Plugins habe ich unter anderem versucht, das Grid und den Container anzupassen:

$grid-gutter-width: 20px;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1100px <====
)

Leider greifen meine Änderungen nach dem storefront:dev nicht. Andere Variablen lassen sich in dieser Datei jedoch problemlos überschreiben, wie z.B. die $sw-color-brand-primary

Mir ist aufgefallen, dass in der platform/src/Storefront/Resources/app/storefront/src/scss/layout/_container.scss die Container Breite festgeschrieben ist:

.container {
    max-width: 1400px;
}

Wenn ich versuche diesen Wert in meinen Theme-scss Dateien zu überschreiben, geht das nur mit einem !important:

.container {
    max-width: 1300px!important;
}

Warum werden die Styles meines eigenen Themes nicht priorisiert und wie kann ich die Variable $grid-gutter-width überschreiben?

2
  • push

Das gleiche Problem habe ich auch. 

Bootstrap Variablen lassen sich nicht übberschreiben.:

Allerdings funktioniert das Überschreiben des Containers auch ohne important.
{ThemePlugin}\src\Resources\app\storefront\src\scss\layout_container.scss -> hier habe ich das auch eingetragen

3

Ich glaube hier wurde auch immer noch nicht nach Wochen und Monaten von Shopware her gesagt, wie jetzt genau der ganze Frontend Scss Override / what ever Prozess funktioniert mit den Variablen, Überschreibung des Core Themes usw.

Die Frage wurde schon dutzende Male hier im Forum an Shopware gestellt und wurde soweit ich das mitbekommen habe bisher ignoriert.

[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski „Moritz Naczenski“)‍ Gibt es hierzu mittlerweile ein best-practise wie genau das ganze sauber funktioieren soll / was der Weg ist für die Frotend Kompilierung & Überschreibung der Themes?

4

@ural schrieb:

… Allerdings funktioniert das Überschreiben des Containers auch ohne important.
{ThemePlugin}\src\Resources\app\storefront\src\scss\layout_container.scss -> hier habe ich das auch eingetragen

Danke für die Antwort.

Stimmt das klappt, war mein Fehler, da ich mit der Reihenfolge in der theme.json rumgespielt habe. Das bringt aber nichts wie ich gemerkt habe:

Die Variablen sind im Bootstrap-Code mit !default versehen, also als Fallback für den Fall, dass dieser Variable noch kein Wert zugewiesen wurde. Das heißt, die eigenen Variablen werden richtigerweise vor dem Bootstrap-Code inkludiert. Dies tut Shopware auch, indem die variables.scss des Shopware-Skins vor Bootstrap in der base.scss importiert wird. In der _bootstrap.scss werden den wichtigsten Bootstrap-Variablen die $sw-prefix-Variablen zugewiesen (z.B. $primary: $sw-color-brand-primary;). Dort wird unter anderem auch die $grid-gutter-width auf 40px gesetzt.

In der theme.scss des Shopware-Skins werden wiederum die $sw-prefix-Variablen mit !default versehen, damit die Werte genutzt werden, die im eigenen Custom Theme für die Shopware-Variablen bereits definiert wurden.

In der theme.json daher die Reihenfolge:

 "style": ["app/storefront/src/scss/variables.scss", "@Storefront", "app/storefront/src/scss/base.scss"]

Verändert man diese Reihenfolge, lassen sich die $sw-Variablen nicht mehr überschreiben.

Man könnte Bootstrap auch in der eigenen base.scss noch einmal importieren, um die Variablen zu überschreiben. Dadurch geht aber das Shopware Theme teilweise kaputt.

Ich habe den Wert für $grid-gutter-width nun direkt im Shopware Theme angepasst.

Es wäre wohl sinnvoll, wenn seitens Shopware den meisten Bootstrap-Variablen (auch der $grid-gutter-width) $sw-Variablen zugewiesen werden.

5

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ß

6

es funktioniert doch, ich hatte ein anderes Theme ausgewählt …