# Zugriff auf SCSS-Variablen aus Plugin-Konfiguration

**URL:** <https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157>\
**Category:** Programmierung\
**Created:** [24. Mai 2020 um 16:03 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157 "2020-05-24T16:03:55Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![inventivo](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/inventivo/32/11397_2.png) [@inventivo](https://forum.shopware.com/u/inventivo)\
**Post date:** [24. Mai 2020 um 16:03 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/1 "2020-05-24T16:03:55Z")

</div>

Ich habe in meinem Plugin die folgende Anleitung angewendet, um bestimmte Werte der Plugin-Konfiguration als SCSS-Variablen zur Verfügung zu stellen:

[https://docs.shopware.com/en/shopware-platform-dev-en/how-to/plugin-scss-variables](https://docs.shopware.com/en/shopware-platform-dev-en/how-to/plugin-scss-variables)

Mir ist nun nicht ganz klar, wie ich nach Speichern der Plugin-Konfiguration an diese Werte gelange. So soll im Plugin zum Beispiel ein Farbwert $my-color angelegt werden. Dieser ist nirgend zu finden.

Habe ich etwas übersehen?

---

<div class="post-metadata">

**Author:** ![inventivo](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/inventivo/32/11397_2.png) [@inventivo](https://forum.shopware.com/u/inventivo)\
**Post date:** [24. Mai 2020 um 17:04 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/2 "2020-05-24T17:04:45Z")

</div>

Hat sich erledigt, mir fehlte noch folgende Zeile:

```
use Shopware\Storefront\Event\ThemeCompilerEnrichScssVariablesEvent;

```

Ohne klappt es natürlich nicht.

---

<div class="post-metadata">

**Author:** ![inventivo](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/inventivo/32/11397_2.png) [@inventivo](https://forum.shopware.com/u/inventivo)\
**Post date:** [24. Mai 2020 um 17:18 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/3 "2020-05-24T17:18:49Z")

</div>

Aber nächste Frage dazu: Ist es sinnvoll, dass der Merchant das Theme nach dem Speichern neuer Konfigurationswerte selbst compilen muss?

Gibt es eine Möglichkeit, dass beim Speichern mit zu erledigen?

---

<div class="post-metadata">

**Author:** ![daMardl](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@daMardl](https://forum.shopware.com/u/daMardl)\
**Post date:** [24. Mai 2020 um 19:49 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/4 "2020-05-24T19:49:47Z")

</div>

> [@NiHa schrieb:](https://forum.shopware.com/profile/34782/NiHa "NiHa")
> 
> Aber nächste Frage dazu: Ist es sinnvoll, dass der Merchant das Theme nach dem Speichern neuer Konfigurationswerte selbst compilen muss?
> 
> Gibt es eine Möglichkeit, dass beim Speichern mit zu erledigen?

Genau davor stehe ich auch. Ich hab rausgefunden, das man dann unter&nbsp;&nbsp;  
Content -\> Themes

sein aktives Theme auswählen muss und einfach einmal auf „Save“ klickt und die Einstellungen aus dem Plugin werden übernommen.

Ich hab jetzt nach dem ursprünglichen Befehl gesucht und den&nbsp; **ThemeService** gefunden der die&nbsp; **compileTheme** Function beinhaltet.&nbsp;

Aber dann steh ich vor dem Problem, dass ich mich in das speichern des PluginKonfig reinhängen muss.&nbsp;  
Das finde ich auch noch raus, aber ist das so angedacht?

Ansonsten muss ich das in die Beschreibung reinschreiben, weil dem Shopbetreiber ist das sicherlich nicht bewusst bei solchen „technischen“ Sachen das Theme neu zu compilieren. Oder kennt er das noch so von SW5.2 und ich mach mir umsonst da sorgen?

Einfach nach Plugin-Config-Änderungen mal pauschal den Cache löschen und Theme neu abspeichern, weil ich ja nicht weiß, was wann da technisch dahinter steckt ☹

Würde mich über nen anderen Ansatz auch freuen.

Gruß  
DaMardl

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![daMardl](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@daMardl](https://forum.shopware.com/u/daMardl)\
**Post date:** [24. Mai 2020 um 20:28 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/5 "2020-05-24T20:28:02Z")

</div>

Okay, die Sache mit Theme Service geht nicht, weil das nur bei Installieren oder Updaten von einem Plugin verwendet wird wo es Events gibt, in die man sich reinhängen kann (PluginPostUpdateEvent). Und die greifen um die Urhzeit nicht mehr 😉

Das speichern in der Plugin Konfiguration&nbsp;ruft folgenden Api-Endpunkt auf und der hat keine Events, in die man sich reinhängen kann.

/api/v1/\_action/system-config/batch

Ich werde es erstmal über die Beschreibung lösen.

Gruß

DaMardl

---

<div class="post-metadata">

**Author:** ![inventivo](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/inventivo/32/11397_2.png) [@inventivo](https://forum.shopware.com/u/inventivo)\
**Post date:** [25. Mai 2020 um 05:52 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/6 "2020-05-25T05:52:14Z")

</div>

Ja, so habe ich es nun auch erst einmal gelöst. Schön wäre hier in Zukunft eine benutzerfreundliche Lösung. Dazu habe ich nun einen Issue angelegt. Wer das Feature noch vermisst: Bitte voten!

[https://issues.shopware.com/issues/NEXT-8780](https://issues.shopware.com/issues/NEXT-8780)

---

<div class="post-metadata">

**Author:** ![daMardl](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@daMardl](https://forum.shopware.com/u/daMardl)\
**Post date:** [25. Mai 2020 um 20:27 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/7 "2020-05-25T20:27:49Z")

</div>

> [@NiHa schrieb:](https://forum.shopware.com/profile/34782/NiHa "NiHa")
> 
> Ja, so habe ich es nun auch erst einmal gelöst. Schön wäre hier in Zukunft eine benutzerfreundliche Lösung. Dazu habe ich nun einen Issue angelegt. Wer das Feature noch vermisst: Bitte voten!
> 
> [https://issues.shopware.com/issues/NEXT-8780](https://issues.shopware.com/issues/NEXT-8780)

Hab mal gevotet.

Das speichern der Konfig-Daten sind sehr generisch aufgebaut. War auch in SW 5 schon so, aber da konnte man sich zumindest in ein Event reinhängen und den Theme Cache invalidieren.&nbsp;

Mal schauen was rauskommt.

gruß

daMardl

---

<div class="post-metadata">

**Author:** ![\_MikeB](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/_mikeb/32/7856_2.png) [@\_MikeB](https://forum.shopware.com/u/_MikeB)\
**Post date:** [25. August 2020 um 14:23 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/8 "2020-08-25T14:23:34Z")

</div>

Hallo.

ich versuche auch gerade wie in der Doku beschrieben, mein SCSS um Variablen zu erweitern. Das funktioniert auch eigentlich tadelos zumindest während das Plugin aktiviert ist. Deaktiviere ich das Plugin und aktiviere es wieder, bekomme ich folgende Meldung:

Plugin could not be activated due to error message "Unable to compile the theme „Storefront“. Undefined variable $MEINVARIABLE: /home/vagrant/shopware-dev/custom/plugins/MEINPLUGIN/src/Resources/app/storefront/src/scss/base.scss on line 2, at column 3 Call Stack: #0 function breakpoint-max /home/vagrant/shopware-dev/vendor/shopware/platform/src/Storefront/Resources/app/storefront/vendor/bootstrap/scss/mixins/\_breakpoints.scss on line 72 #1 mixin media-breakpoint-down&nbsp;

Liegt wohl daran dass das Event&nbsp;

```
 ThemeCompilerEnrichScssVariablesEvent

```

während der Plugin-Aktivierung nicht gefeuert wird und somit auch nicht die Variablen gesetzt werden. Gibt es dafür eine Lösung? Ein zweites Event?

&nbsp;

Gruß Mike

---

<div class="post-metadata">

**Author:** ![\_marco](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/_marco/32/8582_2.png) [@\_marco](https://forum.shopware.com/u/_marco)\
**Post date:** [26. August 2020 um 13:09 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/9 "2020-08-26T13:09:06Z")

</div>

> [@\_MikeB schrieb:](https://forum.shopware.com/profile/27153/_MikeB "\_MikeB")
> 
> Hallo.
> 
> ich versuche auch gerade wie in der Doku beschrieben, mein SCSS um Variablen zu erweitern. Das funktioniert auch eigentlich tadelos zumindest während das Plugin aktiviert ist. Deaktiviere ich das Plugin und aktiviere es wieder, bekomme ich folgende Meldung:
> 
> Plugin could not be activated due to error message "Unable to compile the theme „Storefront“. Undefined variable $MEINVARIABLE: /home/vagrant/shopware-dev/custom/plugins/MEINPLUGIN/src/Resources/app/storefront/src/scss/base.scss on line 2, at column 3 Call Stack: #0 function breakpoint-max /home/vagrant/shopware-dev/vendor/shopware/platform/src/Storefront/Resources/app/storefront/vendor/bootstrap/scss/mixins/\_breakpoints.scss on line 72 #1 mixin media-breakpoint-down&nbsp;
> 
> Liegt wohl daran dass das Event&nbsp;
> 
> ThemeCompilerEnrichScssVariablesEvent
> 
> während der Plugin-Aktivierung nicht gefeuert wird und somit auch nicht die Variablen gesetzt werden. Gibt es dafür eine Lösung? Ein zweites Event?
> 
> &nbsp;
> 
> Gruß Mike

Für alle die vor dem gleichen Problem stehen: Default variablen in scss brachten die Lösung ;)&nbsp;

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [24. November 2020 um 12:25 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/10 "2020-11-24T12:25:54Z")

</div>

ich versuche das auch gerade zum Laufen zu bekommen, allerdings führt bei mir der&nbsp;ThemeVariableSubscriber nie seine Function aus.

habs genauso wie im Beispiel gezeigt… aber es passiert einfach nix.

---

<div class="post-metadata">

**Author:** ![philiscoding](https://avatars.discourse-cdn.com/v4/letter/p/ecb155/32.png) [@philiscoding](https://forum.shopware.com/u/philiscoding)\
**Post date:** [21. Dezember 2020 um 13:56 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/11 "2020-12-21T13:56:24Z")

</div>

Ich habe auch gerade meine Probleme damit. @NiHa‍ Könntest du vielleicht dein komplettes Codebeispiel teilen?

---

<div class="post-metadata">

**Author:** ![voksy123](https://avatars.discourse-cdn.com/v4/letter/v/51bf81/32.png) [@voksy123](https://forum.shopware.com/u/voksy123)\
**Post date:** [10. Januar 2021 um 23:03 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/12 "2021-01-10T23:03:35Z")

</div>

Hallo,

habe auch alles woweit am Laufen jedoch auch das Problem dass bei jeder Änderung im Plugin das Template von Hand neu kompiliert werden muss.  
Gibt es schon eine Lösung wie man dies automatisch ablaufen lassen kann?

---

<div class="post-metadata">

**Author:** ![zenit](https://avatars.discourse-cdn.com/v4/letter/z/a87d85/32.png) [@zenit](https://forum.shopware.com/u/zenit)\
**Post date:** [11. Januar 2021 um 08:12 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/13 "2021-01-11T08:12:59Z")

</div>

@voksy123‍

Bisher leider nein:&nbsp;[Shopware Issuetracker](https://issues.shopware.com/issues/NEXT-8780)

---

<div class="post-metadata">

**Author:** ![voksy123](https://avatars.discourse-cdn.com/v4/letter/v/51bf81/32.png) [@voksy123](https://forum.shopware.com/u/voksy123)\
**Post date:** [11. Januar 2021 um 12:29 UTC](https://forum.shopware.com/t/zugriff-auf-scss-variablen-aus-plugin-konfiguration/67157/14 "2021-01-11T12:29:15Z")

</div>

Hallo nochmal,

schreibe nun in meta.html.twig den benötigten CSS Style

```
{% sw_extends '@Storefront/storefront/layout/meta.html.twig' %}

{% block layout_head_stylesheet %}

    {{ parent() }}

    {% set config = page.header.extensions['pluginConfig'].get('config') %}

    
        .itrTopbar-wrapper {{ '{' }}
            background-color: {{config.backgroundColor}};
            color: {{config.textColor}};
            font-size: {{config.fontSize}};
        {{ '}' }}
        .itrTopbar-wrapper .container {{ '{' }}
            justify-content: {{config.justifyContent}};
        {{ '}' }}
        .itrTopbar-wrapper .container .itrTopbar-item a {{ '{' }}
            color: {{config.textColor}};
        {{ '}' }}
        .itrTopbar-wrapper .container .itrTopbar-item a:hover {{ '{' }}
            color: {{config.linkColor}};
        {{ '}' }}
    

{% endblock %}

```

Oder wie habt ihr das vorrübergehend gelöst?
