Themes und Theme-Komponenten werden stetig leistungsfähiger, und Entwickler werden immer ehrgeiziger. Um Entwicklern die Arbeit zu erleichtern, können Themes ihren SCSS-Code nun auf mehrere Dateien aufteilen.
Wenn Sie ein neues Theme mit der Theme CLI erstellen oder ein Theme auf GitHub teilen, erstellen Sie einfach einen neuen Ordner namens scss. Füllen Sie ihn mit Ihren .scss-Dateien, wobei Sie jede beliebige Ordnerstruktur befolgen können, und alle Dateien stehen Ihnen zum Import in den gemeinsamen / Desktop / Mobile SCSS-Bereichen Ihres Themes zur Verfügung.
Wenn Sie beispielsweise eine gemeinsame Variable sowohl für das mobile als auch für das Desktop-SCSS verfügbar machen möchten, könnten Sie dies wie folgt tun:
scss/my-folder/variables.scss
$favourite-color = red;
desktop/desktop.scss
@import "my-folder/variables";
body {
background-color: $favourite-color;
}
mobile/mobile.scss
@import "my-folder/variables";
body {
color: $favourite-color;
}
Diese Funktion wurde in v2.3.0.beta8 hinzugefügt. Verwenden Sie diese Funktionen also noch nicht, wenn Sie die Abwärtskompatibilität mit älteren Versionen von Discourse aufrechterhalten müssen. Sie können den minimum_discourse_version-Parameter von about.json verwenden, um sicherzustellen, dass Ihre Komponente nicht auf einer früheren Version verwendet wird.
Dieses Dokument wird versioniert – schlagen Sie Änderungen auf GitHub vor.
When converted to a stand-alone theme the background colour will be green, but when used as a component within another theme it doesn’t change the background colour at all.
Das Theme-Setup verfügt über eine Standard-Dateistruktur, und ich habe scss/test.scss hinzugefügt. Anschließend habe ich @import "test"; angegeben.
In der Konsole (unter Verwendung von discourse_theme watch) erhalte ich: ✘ Fehler im gemeinsamen SCSS: Fehler: Datei zum Import nicht gefunden oder nicht lesbar: test. in Zeile 1 von common.scss
Ich habe nur eine Variable deklariert (übrigens gibt es einen Tippfehler im ersten Code-Block oben: deklariert mit Gleichheitszeichen: $favourite-color = red;).
Aber ich habe es gerade gelöst. Ich habe die Mindestversion in about.json als v2.3.0.beta8 festgelegt, und wenn ich das entferne, funktioniert es einwandfrei. Ich habe das noch nie zuvor verwendet, also bin ich mir nicht sicher, was an der Deklaration falsch ist.
Interessant! Wenn du die Mindestversion erneut hinzufügst, führt das dann konsequent zu Fehlern? Falls ja, könntest du das fehlerhafte Thema zippen und hier teilen (oder mir per PN senden)?
Wie gesagt, habe ich zuvor noch nie eine Mindestversion festgelegt. Daher habe ich sie oben einfach als v2.3.0.beta8 kopiert. Das führt zu Fehlern, aber 2.3.0.beta8 funktioniert einwandfrei.