Wie nutze ich css/scss in einem eigenen Theme

Shopware 6 (German)
1

Hallo,
Ich habe folgendes Problem, ich will das css meines Themes verändern.
Ich habe genau wie ich die Templates mache den Pfad zu der jeweiligen scss datei im custom ordner nachgebaut und die Datei dort angelegt mit meinen anpassungen, doch werden die css änderungen im shop nicht übernommen.
Mache ich die änderungen inline mit der style property funktioniert es.

Als Beispiel habe ich folgendes in meinem custom Ordner angelegt
Resources/app/storefront/src/scss/skin/shopware/layout/_main-navigation.scss
und habe folgendes:

   .main-navigation-menu {
       font-size: $font-size-lg
   }

abgeändert auf

 .main-navigation-menu {
       font-size: $font-size-lg;
       margin-left: 25%;
   }

Was nichts im Shop geändert hatt wenn ich allerdings in
Resources/views/storefront/layout/navigation/navigation.html.twig
Die Zeile:

   <nav class="nav main-navigation-menu"
   itemscope="itemscope"
   itemtype="http://schema.org/SiteNavigationElement">

auf folgende ändere funktioniert es:

   <nav class="nav main-navigation-menu"
   itemscope="itemscope"
   itemtype="http://schema.org/SiteNavigationElement"
   style="margin-left: 25%">

Das mag zwar eine temporäre lösung sein doch will ich nicht alle css änderungen inline machen müssen.
Wie kann ich diese Änderungen in einer css /scss dateimachen?

2

Deine scss Datei muss in der Theme.json referenziert werden. Außerdem musst du die scss kompilieren, sprich umwandeln in die Produktiv-CSS Datei. Ich meine das geht z.B. mit bin/console theme:compile. Guck dir sonst dazu Tutorials über das Grundgerüst von Themes an. Cache womöglich löschen, auch im Browser.

3

Hallo,

Danke für die Antwort,
Wie genau muss diese referenziert werden in der Theme.json? Dort wird die base.scss und die override.scss referenziert, die override.scss ist allerdings wohl dafür da Standart bootstrap werte zu ändern was etwas anderes ist als das was ich gern tun würde.

Welche Tutorials zum Grundgerüst von Themes meinen sie? bzw wo sind diese zu finden?
Falls sie Die von der Shopware Acedemy meinen diese habe ich gesehen doch wird dort leider nicht auf css/scss files eingegangen sondern nur auf die twig.

4

Mit den Overrides ist korrekt aber die base.css ist ja z.B. für dein Theme. Dort kannst du ja CSS einfügen. Ich denke dass sich eine weitere *.scss in der Theme.json entsprechend wie die base.scss einfach hinzufügen lässt. Halt einer neuer Eintrag dort an der Stelle.

5

Zum Beispiel hier:

6

Hi zusammen,

ich habe mir ein eigenes Theme erstellt wie in der Doku beschrieben und anschließend im Shop als aktives Theme ausgewählt. In diesem Theme habe ich u.a. dann die css Dateien angepasst. Der Pfad lautet so:

… custom/plugins/MeinTheme/src/Resources/app/storefront/src/scss

Dort stehen die base.scss und die overrides.scss mit den Anpassungen. Wenn ich im Backend das Theme neu speichere, werden die Änderungen aktiv.

Hope this helps.

7

Hm, ein Wort vergessen oder die Frage nicht gestellt? Was ist jetzt dein Anliegen?