### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [15. April 2019 um 16:04 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/1 "2019-04-15T16:04:10Z")
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.
>
>
> Theme developers can include any number of scss files within the /scss/ director…y of a theme. These can then be imported from the main common/desktop/mobile scss.
Wenn Sie ein neues Theme mit der [Theme CLI](https://meta.discourse.org/t/beginners-guide-to-using-theme-creator-and-theme-cli-to-start-building-a-discourse-theme/108444) erstellen oder ein Theme [auf GitHub](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848) 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**
```scss
$favourite-color = red;
```
**desktop/desktop.scss**
```scss
@import "my-folder/variables";
body {
background-color: $favourite-color;
}
```
**mobile/mobile.scss**
```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`](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848) verwenden, um sicherzustellen, dass Ihre Komponente nicht auf einer früheren Version verwendet wird.
* * *
Dieses Dokument wird versioniert – schlagen Sie Änderungen [auf GitHub](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/08-multiple-scss-files.md) vor.
---
### Author:  [@justin](https://meta.discourse.org/u/justin)
#### Post date: [15. April 2019 um 16:25 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/2 "2019-04-15T16:25:47Z")
This is amazing @david! Nice work!
I can’t wait to give this a whirl.
---
### Author:  [@justjong](https://meta.discourse.org/u/justjong)
#### Post date: [24. April 2019 um 15:01 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/3 "2019-04-24T15:01:30Z")
This is a great! I can now remove my hack for getting around not being able to do this.
---
### Author:  [@LeoMcA](https://meta.discourse.org/u/LeoMcA)
#### Post date: [25. Juli 2019 um 20:20 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/4 "2019-07-25T20:20:58Z")
@david Das ist großartig, aber leider scheint es nicht zu funktionieren, wenn das Thema eine Komponente ist. Ich bin mir nicht sicher, ob dies ein bekannter Fehler ist.
Sie können dies an diesem sehr einfachen Thema sehen: [GitHub - LeoMcA/discourse-multi-scss-component · GitHub](https://github.com/LeoMcA/discourse-multi-scss-component)
Wenn es in ein eigenständiges Thema umgewandelt wird, ist die Hintergrundfarbe grün, aber wenn es als Komponente innerhalb eines anderen Themas verwendet wird, ändert sich die Hintergrundfarbe überhaupt nicht.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [29. Juli 2019 um 09:29 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/6 "2019-07-29T09:29:35Z")
Danke @LeoMcA, du hast recht – das hat in Komponenten nicht funktioniert. Das Problem sollte in
[FIX: Support multi-file stylesheets in theme components (#7950) · discourse/discourse@933d279 · GitHub](https://github.com/discourse/discourse/commit/933d2798113c2a54264cf927fc8eabe660bfd17a) behoben sein.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [28. Juli 2021 um 11:49 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/7 "2021-07-28T11:49:55Z")
Soll das immer noch funktionieren? Meine Standard-SCSS-Dateien (common/desktop/mobile) funktionieren nicht, wenn ich ein @import hinzufüge.
Oder gibt es eine neue Empfehlung zum Aufteilen von Dateien?
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [28. Juli 2021 um 11:59 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/8 "2021-07-28T11:59:11Z")
Dies sollte immer noch funktionieren. Könntest du die genaue `@import`-Anweisung, die du verwendest, und die Dateistruktur deiner Stylesheets teilen?
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [28. Juli 2021 um 12:09 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/9 "2021-07-28T12:09:07Z")
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`
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [28. Juli 2021 um 12:12 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/10 "2021-07-28T12:12:52Z")
Ist in deiner `test.scss`-Datei etwas enthalten?
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [28. Juli 2021 um 12:21 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/11 "2021-07-28T12:21:58Z")
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.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [28. Juli 2021 um 12:24 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/12 "2021-07-28T12:24:21Z")
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)?
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [28. Juli 2021 um 12:42 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/13 "2021-07-28T12:42:35Z")
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.
---
### Author:  [@MatheusMatos](https://meta.discourse.org/u/MatheusMatos)
#### Post date: [18. Januar 2024 um 00:58 UTC](https://meta.discourse.org/t/split-up-theme-scss-into-multiple-files/115126/14 "2024-01-18T00:58:00Z")
Ist es möglich, SCSS-Dateien aus einem node\_modules-Paket zu verwenden? Zum Beispiel:
```plaintext
@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.