Base-Variable aus eigenem Theme überschreiben - Variable undefined

HAllo,

ich möchte aus meinem eigenen Theme einige Base-Variablen überschreiben.

hier meine theme.json

"views": [
     "@Storefront",
     "@Plugins",
     "@MyTheme"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@Storefront",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "app/storefront/dist/storefront/js/my-theme.js"
  ],
  "asset": [
    "app/storefront/src/assets"
  ],

und außerdem hab ich dort ein eigenes Feld definiert:

"my-border-radius": {
        "label": {
          "en-GB": "Border-Radius",
          "de-DE": "Border-Radius"
        },
        "type": "number",
        "value": "3",
        "editable": true,
        "block": "general"
      }

das Feld erscheint auch in der Theme-Pflege und ich kann einen Wert eingeben.

Diesen Wert möchte ich dann in der overrides.scss nutzen um Base-Variablen (Bootstrap) zu überschreiben

$border-radius: $my-border-radius;
$border-radius-default: $my-border-radius;

Beim Theme-Compile gibts dann allerdings einen Error: Undefined variable $my-border-radius

Was mach ich falsch? Fehlt noch was?

hab schon versucht in der theme.json noch bei “style” mein “@MyTheme” vor der overrides.scss zu ergänzen, aber dann gibts wohl ne Endlosschleife (Allowed memory size of 536870912 bytes exhausted) …

Bitte um Hilfe!

weiß denn keiner etwas dazu? Shopware?

hab schon versucht in der theme.json noch bei „style“ mein „@MyTheme“ vor der overrides.scss zu ergänzen, aber dann gibts wohl ne Endlosschleife (Allowed memory size of 536870912 bytes exhausted) …

Ja weil das Theme sich wahrscheinlich immer selbst aufruft :stuck_out_tongue:

Kannst du denn z.B. $sw-color-brand-primary als Variable nutzen? Das würde den Fehler auf jeden Fall ausgrenzen.

Hallo @Moorleiche‍,

ja die Variable  $sw-color-brand-primary kann ich nutzen… allerdings nur mit der “Standardkonfiguration”

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

sobald ich mein Theme dort rein packe…

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

… geht auch diese Variable nicht mehr --> Endlosschleife

meine eigenen Variablen kann ich aber in beiden Fällen nicht nutzen…

es wäre schön, mal ein offizieles Statement von Shopware zu haben… Für was kann man eigene Themes erstellen, wenn man dann keine Variablen nutzen kann… 

 

EDIT: scheint, als ob das aktuell wirklich nicht geht… es gibt ein Ticket https://issues.shopware.com/issues/NEXT-6893 bitte voten!

Hallo zusammen,

welche Version hast du im Einsatz, FloC3?

Hast du gerade zwei Themes im Einsatz, welche aufeinander aufbauen sollen, oder ist “MyTheme” dein einziges Theme? Das eigene Theme, sollte im “style” und “script” Array nicht aufgerufen werden. Diese arbeiten im gegensatz zu “views” etwas anders und sollen vom eigenen Theme nur Dateien aufrufen.

Der undefined Fehler klingt danach, als wäre nicht “theme:refresh” aufgerufen worden um die theme.json neu einzulesen. Das kann dazu führen, dass die Variable undefined ist. Wobei mich dann wundert, dass du die Felder im Theme Manager sehen kannst.

In meinem Test Theme funktioniert das überschreiben von z.B. “$border-radius” mit eigenen Variablen aus der theme.json:

theme.json:

{
    "name": "TestTheme",
    "author": "Shopware AG",
    "views": [
        "@Storefront",
        "@Plugins",
        "@TestTheme"
    ],
    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@Storefront",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@Storefront",
        "app/storefront/dist/storefront/js/test-theme.js"
    ],
    "asset": [
        "app/storefront/src/assets"
    ],
    "config": {
        "fields": {
            "sw-my-color": {
                "label": {
                    "en-GB": "My color",
                    "de-DE": "Meine Farbe"
                },
                "type": "color",
                "value": "#ffcc00",
                "editable": true,
                "block": "themeColors",
                "order": 500
            },
            "sw-my-radius": {
                "label": {
                    "en-GB": "My radius",
                    "de-DE": "Mein Radius"
                },
                "type": "text",
                "value": "10px",
                "editable": true,
                "block": "themeColors",
                "order": 600
            },
            "sw-new-color": {
                "label": {
                    "en-GB": "New color",
                    "de-DE": "Neue Farbe"
                },
                "type": "color",
                "value": "#f8f8f8",
                "editable": true,
                "block": "themeColors",
                "order": 700
            }
        }
    }
}

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
*/

// New variable from my theme.json which will be the value of $primary
$primary: $sw-my-color;

// New variable from my theme.json which will be the value of $border-radius
$border-radius: $sw-my-radius;

base.scss:

body {
    // This $sw-new-color will not be overwritten. Is is used directly.
    background-color: $sw-new-color;
}

Wenn Variablen aus der theme.json direkt verwendet werden sollen, muss man sie nicht in die overrides.scss packen sondern kann sie direkt aufrufen wie im Beispiel “base.scss”.

Das Test Theme habe ich bei GitHub zur Verfügung gestellt. Vielleicht magst du einmal verifizieren ob das bei dir kompiliert? https://github.com/tobiasberge/TestTheme

Aussehen sollte das wie folgt:

Viele Grüße
Tobias

 

Hallo [@Tobias Berge](http://forum.shopware.com/profile/20591/Tobias Berge “Tobias Berge”)‍,

ich hab einfach via theme:create ein neues angelegt. Es soll das Standard-Theme erweitern bzw. verändern.

hier meine json:

{
  "name": "MyTheme",
  "author": "FloC3",
  "previewMedia": "app/storefront/src/assets/preview.png",
  "views": [
     "@Storefront",
     "@Plugins",
     "@MyTheme"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@Storefront",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "app/storefront/dist/storefront/js/my-theme.js"
  ],
  "asset": [
    "app/storefront/src/assets"
  ],
  "config": {
    "blocks": {
      "general": {
        "label": {
          "en-GB": "General Settings",
          "de-DE": "Allgemein"
        }
      }
    },
    "fields": {
      "my-border-radius": {
        "label": {
          "en-GB": "Border-Radius",
          "de-DE": "Border-Radius"
        },
        "type": "number",
        "value": "3",
        "editable": true,
        "block": "general"
      }
    }
  }
}

das sieht in der Theme-Config dann so aus, das Feld ist also natürlich sichtbar und der Wert wird auch gespeichert.

hier meine override.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
*/

$border-radius: $my-border-radius;

–> das ergibt einen Compile-Error (variable not found)

 

EDIT: ich hab deins jetzt mal installiert und es funktioniert… hab es nochmal verglichen aber hab keine Ahnung, was bei deinem anders ist… oder ich bin blind … hab nur gesehen, dass du einen bestehenden Theme-Block erweitert hast und ich mein Feld in einem neuen Block hatte…

Hi FloC3,

danke für deine Hilfe. Ich teste es auch nochmal gegen mit einem neuem Block. Könntest du vielleicht dein Theme irgendwie bereit stellen? Dann könnten wir versuchen das zu kompilieren, nur um auszuschließen, dass es wirklich das Theme und nicht irgendwie die Dev-Umgebung ist.

@FloC3‍ [@Tobias Berge](http://forum.shopware.com/profile/20591/Tobias Berge “Tobias Berge”)‍ Also nachdem ich die “override.scss” nach oben gepackt habe und diese aus meienr base.scss heraus genommen habe funktioniert auch die Überschreibung der vorhandenen Variablen  Thumb-Up

Allerdings ganz normal ein Theme Plugin - Jetzt kein Child Theme vom eigenen Theme.

Hallo,

also im Theme hab ich das über die theme.json mit dem Override und logischerweise auch dem Einbinden der anderen Bootstrap Variablen, Mixins und Co hinbekommen.

Aber wie läuft das in einem Plugin? Da gibts ja keine theme.json …

muss ich das echt über hardcoded Imports machen?

@import '../../../../../../../platform/src/Storefront/Resources/node_modules/bootstrap/scss/_functions.scss';
@import '../../../../../../../platform/src/Storefront/Resources/node_modules/bootstrap/scss/_variables.scss';
@import '../../../../../../../platform/src/Storefront/Resources/node_modules/bootstrap/scss/_mixins.scss';
@import '../../../../../../../platform/src/Storefront/Resources/src/style/skin/shopware/abstract/variables/_theme.scss';
@import '../../../../../../../platform/src/Storefront/Resources/src/style/skin/shopware/abstract/variables/_bootstrap.scss';

oder gibts eine andere Lösung analog zu Themes?

[@Tobias Berge](http://forum.shopware.com/profile/20591/Tobias Berge “Tobias Berge”)‍ ?

Hi @FloC3‍,

bitte entschuldige meine späte Antwort. Für Plugins gibt es keine analoge Lösung zu Themes im Sinne einer plugins.json o.ä. Das Plugin SCSS kommt immer vor oder nach der Storefront - je nachdem wie man es in der theme.json vom aktiven Theme definiert hat. Aber es kann nicht „in sich“ nochmal in der Reihenfolge verändert werden. Wobei das Überschreiben von SCSS Variablen ja auch eher Theme Aufgabe ist. Wenn du es wirklich im Plugin überschreiben musst, könntest du es zur Not hard-coded importieren. Wenn dein Plugin nur Variablen überschreiben, aber keine sonstigen Änderungen machen muss, die auf Storefront aufbauen, könntest du auch die „style“ Reihenfolge anpassen in der theme.json deines aktiven Themes:

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

Tut mir leid, dass wir hier noch keine schönere Lösung anbieten können im Moment. Man muss aber auch sagen, dass Bootstrap uns das Leben nicht gerade leichter gemacht hat mit der Entscheidung, dass Variablen overrides vorher kommen müssen.

Viele Grüße
Tobias

@Tobias Berge schrieb:

[…] Bootstrap uns das Leben nicht gerade leichter gemacht hat mit der Entscheidung, dass Variablen overrides vorher kommen müssen.

Deswegen war ich immer Fan von LESS… die Vorzüge von SASS/SCSS habe ich noch nie wirklich verstanden…  

[@Tobias Berge](http://forum.shopware.com/profile/20591/Tobias Berge “Tobias Berge”)‍

Man muss aber auch sagen, dass Bootstrap uns das Leben nicht gerade leichter gemacht hat mit der Entscheidung, dass Variablen overrides vorher kommen müssen.

dumme Frage, aber wieso wählt mann dann eine Lösung, die einem “das Leben nicht gerade leicht macht”? Ich fand die Lösung und den Workflow ähnlich wie @mdsw‍ bei LESS in SW5 echt super und vor allem verständlich…