SCSS-Theme in mehrere Dateien aufteilen

Dokumentation Entwicklerhandbücher
1

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.

20 „Gefällt mir“
Breaking up common.scss into multiple files in components?
Discourse 2.3.0.beta9 Release Notes
Need help with theme component Github
Please support any theme/component. css+html can be customized
2

This is amazing @david! Nice work!

I can’t wait to give this a whirl.

8 „Gefällt mir“
3

This is a great! I can now remove my hack for getting around not being able to do this.

5 „Gefällt mir“
4

@david this is great, but unfortunately it doesn’t seem to work when the theme is a component. Not sure if that’s a known bug.

You can see it happen with this very simple theme: GitHub - LeoMcA/discourse-multi-scss-component

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.

5 „Gefällt mir“
6

Thanks @LeoMcA, you’re right - this wasn’t working in components. The issue should be fixed in

4 „Gefällt mir“
7

Is that still supposed to work? My default scss files (common/desktop/mobile) don’t work when I add an @import.

Or is there a new recommendation for splitting files?

8

This should still work. Can you share the precise @import statement you’re using, and the file structure of your stylesheets?

9

The theme setup has default file structure and I added scss/test.scss Then I state @import "test";

On the console (using discourse_theme watch) I get:
✘ Error in common scss: Error: File to import not found or unreadable: test. on line 1 of common.scss

10

Does your test.scss file have any content?

11

Just declared one variable (btw there’s a typo on the first code block above, declared with equals: $favourite-color = red;)

But just solved it. I set the minimum version in about.json as v2.3.0.beta8 and when I remove that, it works just fine. Never used that before, so not sure what’s wrong with the declaration.

1 „Gefällt mir“
12

Interesting! If you add the minimum version again, does it consistently break? If so, would you mind zipping up the broken theme and sharing it here? (or PMing it to me)

1 „Gefällt mir“
13

As said, I never set a min version before. So I just copied it above as v2.3.0.beta8. This breaks, but 2.3.0.beta8 works just fine.

14

Ist es möglich, SCSS-Dateien aus einem node_modules-Paket zu verwenden? Zum Beispiel:

@import 'bootstrap/scss/bootstrap.scss';
@import '../node_modules/bootstrap/scss/bootstrap.scss';

In beiden Fällen kann ich dies nicht aus dem /scss-Ordner importieren.