Theme-SCSS mit Branding-Einstellungen kompilieren

Jedes Mal, wenn der Admin das Branding speichert, kompiliert hostware das SCSS deines Themes mit den ausgewählten Farben, dem Radius und den Google Fonts, bevor Bootstrap geladen wird. Das Ergebnis wird in /public/assets/css/theme-<vendor>-<name>-sc<id>.min.css geschrieben – eine Datei pro Vertriebskanal – und vor deinen statischen Styles ausgeliefert.

Themes aktivieren dies, indem sie eine SCSS-Eintragsdatei unter public/css/style.scss ablegen und für ihre brandingbezogenen Variablen !default verwenden, damit die injizierten Werte Vorrang haben.

Die SCSS-Eintragsdatei

Erstelle public/css/style.scss. Dies ist die einzige Datei, die die Pipeline direkt einliest; sie kann alles andere unter public/css/ per @import importieren.

// public/css/style.scss
@import "bootstrap/functions";   // needed before your overrides
@import "variables";              // your brand-tied overrides
@import "bootstrap/bootstrap";    // full Bootstrap
@import "theme";                  // your refinements

Branding-Tokens überschreibbar machen

Die Compile-Pipeline stellt die Branding-Werte des Admins als SCSS-Variablen ganz oben in style.scss voran. Damit diese vorangestellten Werte Vorrang haben, muss jede brandingbezogene Variable in deiner _variables.scss !default verwenden. Ohne !default weist deine Zeile der Variable einen neuen Wert zu und überschreibt damit den injizierten Wert.

// Correct - admin colours win
$primary: #175cd3 !default;

// Wrong - admin colours are ignored
$primary: #175cd3;

Jede benutzerdefinierte Variable, die einen Branding-Token verwendet, beispielsweise $my-blue: $primary, übernimmt automatisch die Auswahl des Admins.

Was die Pipeline injiziert

Farben (primary, secondary, success, danger, warning), Seitenflächen (Hintergrund und Text des Bodys sowie Hintergrund und Text von Karten), Rahmenfarbe und Radius sowie die primäre und sekundäre Schriftfamilie werden alle aus dem Branding-Formular des Admins übernommen. Wenn eine Schriftart ausgewählt wird, schreibt die Pipeline außerdem @font-face-Regeln für die lokal heruntergeladenen *.woff2-Schriftschnitte, damit der Storefront die tatsächlichen Dateien lädt.

Dark-Mode-Farben werden, sofern der Admin sie festlegt, NACH dem kompilierten Theme als [data-bs-theme="dark"]-Block angehängt, sodass sie in der Kaskade immer Vorrang haben.

Das kompilierte CSS aus meta.twig laden

Überschreibe das Meta-Layout des Storefronts, damit das Storefront den Compile für den jeweiligen Vertriebskanal verknüpft, mit einem Fallback auf dein statisches style.min.css für Kanäle, für die noch kein Branding gespeichert wurde.

{# resources/views/storefront/layouts/meta.twig #}

{% hw_extends 'storefront::layouts/meta.twig' %}

{# Your compile bundles its own Bootstrap - suppress the core one #}
{% block layouts_head_link_bootstrap %}{% endblock %}

{% block layouts_head_theme_css %}
    {% set compiledThemeCss = salesChannel.getCompiledThemeCssUrl() %}
    {% if compiledThemeCss %}
        <link rel="stylesheet" href="{{ compiledThemeCss }}?v={{ hwCacheId }}">
    {% else %}
        <link rel="stylesheet" href="{{ asset('themes/hw/mytheme/css/style.min.css') }}?v={{ hwCacheId }}">
    {% endif %}
{% endblock %}

Liefere eine versionierte style.min.css mit dem Theme aus, damit neue Vertriebskanäle vor dem ersten Speichern durch den Admin korrekt dargestellt werden.

Während der Entwicklung

Das Bearbeiten von SCSS löst nicht automatisch eine erneute Kompilierung aus. Das CSS des jeweiligen Vertriebskanals wird nur neu erstellt, wenn der Admin im Branding-Tab auf „Speichern“ klickt oder ein Befehl dies anweist. Zwei Hilfsfunktionen decken die üblichen Fälle ab:

• php artisan theme:watch überwacht alle SCSS-Dateien in jedem installierten Theme und kompiliert bei Änderungen die betroffenen Vertriebskanäle neu. Verwende den Befehl, während du Styles iterierst. Optionale Flags: --interval=<seconds> für das Abfrageintervall und --initial, um beim Start einmal eine vollständige Kompilierung durchzuführen.

• $salesChannel->recompileBranding(force: true) aus Tinker oder einem Post-Update-Hook erstellt Schriftarten, Bootstrap und das Theme in einem Durchlauf neu. Verwende die Methode nach einem hostware-Update, da der Updater /public/assets überschreibt.