Wie am besten mit scss arbeiten?

**tpk** · 21.04.2021, 08:21

Hi,

ich arbeite mit scss, dazu binde ich app.scss im Seitenlayout ein. In app.scss habe ich aber nur die Imports. Wenn ich nun in den eigentlichen scss-Dateien arbeite, muss ich jedesmal auch die app.scss ändern, wenn ich die Änderungen sehen will, oder? Bisschen lästig.

Wie macht Ihr das?

**Kopfnuss** · 21.04.2021, 09:05

Ich bin letztens erst auf VS Code umgestiegen und lasse mir die CSS Datei in dem Editor generieren.
Ich binde nur die generierte CSS in Contao ein und VS Code generiert beim speichern der SCSS Datei immer die CSS Datei automatisch.

**Kahmoon** · 21.04.2021, 09:14

Ich binde die scss Dateien direkt im Layout ein und lasse Contao die Umwandlung machen. Viele Wege führen nach Rom

**tpk** · 21.04.2021, 09:36

@Kopfnuss
Ich verwende Foundation. Im letzten Projekt habe ich mir die css von node generieren lassen, aber diese css ist dann immer riesig gewesen, weil da alles drin war. Außerdem musst Du dann jedesmal die css Datei anfassen und hochladen, oder?

Deswegen bin ich froh, dass Contao scss kompiliert, aber ich habe mir außerhalb von Contao angewöhnt, versch. Dateien zu verwenden. layout.scss, fonts.scss, menu.scss, etc. Da nervt dann, das die eingebundene Datei sich ändern muss, um eine neue Kompilation anzustoßen. Ich mach jetzt dann erst mal alles wieder in einer Datei.

**Kopfnuss** · 21.04.2021, 09:41

Meinst du riesig wegen der Ladezeit? Die CSS ist natürlich compressed.
Ansonsten habe ich mehrere SCSS Datein und binde die über @import ein.

Hochladen macht VS Code automatisch beim speichern und die Daten synchronisert es. Sonst arbeite ich bei der Entwicklung lokal.

**Kahmoon** · 21.04.2021, 09:54

Zitat von tpk

Deswegen bin ich froh, dass Contao scss kompiliert, aber ich habe mir außerhalb von Contao angewöhnt, versch. Dateien zu verwenden. layout.scss, fonts.scss, menu.scss, etc. Da nervt dann, das die eingebundene Datei sich ändern muss, um eine neue Kompilation anzustoßen. Ich mach jetzt dann erst mal alles wieder in einer Datei.

Musst du eigentlich nicht. Ich binde im Layout lediglich die "Haupt SCSS" styles.scss ein. Dort drin sind dann die Unterfiles per @import.

Code:


@import '_variablen';
@import '_layout';
@import 'navigation';
@import 'formulare';

.....
mein genereller CSS Code

**tpk** · 21.04.2021, 11:25

@Kopfnuss
Die Foundation Lösung generiert eine CSS Datei mit dem ganzen Framework drin. Das hat zum Arbeiten zu lange gedauert beim Hochladen. Wenn Du Deine Dateien vom Frameworkt trennst, geht das natürlich besser. Du musst aber immer noch das Hochladen auslösen, oder?

@Kahmoon
Aber wenn Du was in _layout änderst, musst Du auch was in styles.scss ändern, sonst springt der Compiler in Contao nicht an, oder?

**Kopfnuss** · 21.04.2021, 11:32

Das ist eine Erweiterung für VS Code die ich da nutze, da kann ich einstellen ob die Datei automatisch hochgeladen wird.
Ich bin auch der Meinung das es bei mir immer die CSS generiert wenn ich etwas in einer SCSS Datei ändere, egal welche.. es wird die CSS immer beim speichern neu geschrieben.

**Franko** · 21.04.2021, 11:44

Ich arbeite nur lokal mit Sass/Scss und binde in Contao die generierte CSS ein.
Dann hat man auch nicht das Problem bei den Sass/Scss Partials Änderungen ...

s.a.: https://docs.contao.org/manual/de/an...s-integration/

**Kahmoon** · 21.04.2021, 11:56

Zitat von tpk

@Kahmoon
Aber wenn Du was in _layout änderst, musst Du auch was in styles.scss ändern, sonst springt der Compiler in Contao nicht an, oder?

Ohne Cache neu laden und er nimmt die Änderungen sofort. Egal in welcher der Dateien eine Änderung war.

**mlweb** · 21.04.2021, 12:03

Ich arbeite auch zu 90% lokal mit scss und binde nur die resultierende css-Datei ein.

**conter** · 21.04.2021, 14:44

Hallo @Kopfnuss,

magst du sagen wie die vscode Erweiterung heißt?

Viele Grüße,
conter

**Kopfnuss** · 21.04.2021, 14:51

@conter
klar.. für den Upload benutze ich "ftp-kr".. für Scss die Erweiterung "Live Sass Compiler" und natürlich um alles zu Ordnen "Project Manager"

**zonky** · 21.04.2021, 18:41

ich nutze seit einigen Jahren https://prepros.io/ - der überwacht auch die Ordner/Dateien auf Veränderungen, minimiert auf Wunsch und - was oft fehlt - erstellt eine .map

**mdoll** · 22.04.2021, 11:11

Zitat von tpk

@Kopfnuss
Die Foundation Lösung generiert eine CSS Datei mit dem ganzen Framework drin.

Hast Du in der app.scss alles auskommentiert, was Du vom Foundation Framework nicht benötigst? Das wirkt sich erheblich auf die Größe des generierten CSS aus.

Gruß
Mathias

**Franko** · 22.04.2021, 11:41

Zitat von zonky

ich nutze seit einigen Jahren https://prepros.io/ - der überwacht auch die Ordner/Dateien auf Veränderungen, minimiert auf Wunsch und - was oft fehlt - erstellt eine .map

Alternative:
Ich benutze lokal "Dart Sass" (über node.js) und für die tasks dann npm scripts (auch mit möglichen watch task/soucre-maps) ...

s.a.: https://community.contao.org/de/show...sass-scss-less

**derRenner** · 22.04.2021, 13:44

Ich hatte die Tage mit der Erweiterung [erdmannfreunde/euf_nutshell] von Dennis gearbeitet und hatte hierzu auch die [erdmannfreunde/theme-toolbox] mit installiert, die genau dieses Problem behebt.
Aktiviert man in der Entwicklungsphase die toolbox wird der Cache bei jedem Seitenaufruf gelöscht - wichtig ist hier wohl, dass dies nach getaner Arbeit wieder deaktiviert wird, sodass es zu keinen Performanceproblemen kommt.

**Dean** · 23.04.2021, 09:23

Ich entwickel lokal und nutze die File Watcher in Webstorm/PHPStorm, um mir über Dart Sass eine css-Datei generieren zu lassen. (Von Dart Sass gibt es übrigens auch Binaries, die man sich nur in den Path legen muss.) Contao habe ich dann über einen Browsersync-Proxy eingebunden, so dass Änderungen instant im Browser angezeigt werden.