Workflow bei der (S)CSS Bearbeitung

Druckbare Version

10.04.2020, 07:40
ph!L

Liste der Anhänge anzeigen (Anzahl: 2)

Workflow bei der (S)CSS Bearbeitung

Hallo Gemeinde,

schon seit einigen Jahren stellt sich für mich die Frage, wie eigentlich der optimale (S)CSS-Workflow in Contao aussieht und wie andere das machen.
Hintergrund der Frage ist, dass die kompilierten CSS Dateien ja gecachet werden und man zur Neu-Kompilierung manuell den Scriptcache löschen muss. Das kann man ja unmöglich nach jeder einzelnen Änderungen in einer der SCSS Dateien machen. Wie handhabt ihr das also?

Wir hatten uns in der Vergangenheit mal eine eigene Erweiterung geschrieben, mit der man in den Systemeinstellungen einen Haken "Assets löschen" setzen konnte und das dann nach jedem Pageview den Scriptcache geleert hat. Problem: Seit Contao 4.8 erscheint diese Einstellung nicht mehr, obwohl sie eigentlich noch da ist und per localconfig.php noch aktivierbar ist. Jedoch greift die Einstellung dann erst, nachdem man den Webserver (!) neu gestartet hat.

https://community.contao.org/de/atta...2&d=1586500748 https://community.contao.org/de/atta...3&d=1586500757

Das kann ja insgesamt nicht der Prozess sein, den sich das Core-Team gedacht hat – oder?

Daher wäre meine Frage: Wie macht ihr das, so dass ihr nicht nach jeder Änderung an SCSS Code manuell irgendetwas leeren und löschen oder 15 Sekunden auf die Neu-Kompilierung warten müsst?

Ich wäre sehr gespannt.

Herzliche Grüße und frohe Ostern
Philipp
10.04.2020, 09:19
mlweb

Ich nutze SCSS nur in der Entwicklung lokal. Auf dem Server wird nur die resultierende CSS-Datei eingebunden.
Das passt aber wahrscheinlich nicht zu Eurem Workflow.
10.04.2020, 09:51
ph!L

Jein. Lokal hast du ja ein Abbild des Live- oder Dev-Servers laufen. Da stellt sich ja im Prinzip die gleiche Frage.
10.04.2020, 10:19
mlweb

Ich arbeite lokal mit Gulp und binde dann lokal in Contao auch nur die CSS-Datei ein oder habe lokal gar kein Contao laufen, sondern nur meine SCSS-Files und Gulp und synchronisiere die CSS-Datei mit dem Server. Für mich als Einzelkämpfer ist das optimal.
Wenn man nicht auf Shared Hosting angewiesen ist, hat man sicher auch die Möglichkeit Gulp oder Webpack direkt auf dem Server zu nutzen. Mit Webpack bin ich allerdings nicht auf Anhieb zurecht gekommen.
10.04.2020, 10:59
Spooky

Same here, lokales Asset building. Die SCSS Funktionalität von Contao verwenden wir nie.
10.04.2020, 11:50
stefan-at-work

Ich verwende Visual Studio Code u.a. mit der Extensions sftp und Live Sass Compiler. Dazu dann noch die Toolbox-Erweiterung von Dennis
10.04.2020, 12:43
Niels H

Wenn ich bei Contao im Seitenlayout ein Häkchen bei "Skripte zusammenfassen" und bei "Markup komprimieren" setze, wird nach jeder Änderung in der SCSS-Datei beim Neuladen einer Seite die CSS-Datei neu generiert. Habe es jetzt nicht auf einer frischen Installation ausprobiert, aber ich gehe nicht davon aus, dass ich noch eine weitere Einstellung gemacht habe.
10.04.2020, 15:35
mlweb

Zitat:

Zitat von Niels H

Wenn ich bei Contao im Seitenlayout ein Häkchen bei "Skripte zusammenfassen" und bei "Markup komprimieren" setze, wird nach jeder Änderung in der SCSS-Datei beim Neuladen einer Seite die CSS-Datei neu generiert.

Das Thema wurde schon mal irgendwo diskutiert. Solange Du alle scss-Dateien direkt einbindest funktioniert das. Sobald Du aber über @import arbeitest und in den zu importierenden Dateien Veränderungen vornimmst änderst sich ja die Datei in die importiert wird nicht. Das war zu mindestens das Problem soweit ich mich richtig erinnere.
10.04.2020, 16:12
tab

Da ich zufälligerweise :) gerade an einer alten Installation rumbastle, die rein zufällig genau mit im Seitenlayout eingebundenen SCSS-Dateien mit @import funktioniert, werde ich da mal ein wenig testen. Änderungen am CSS waren jetzt zwar nicht direkt geplant, können aber auch nicht schaden, nachdem ich die Aktualisierung der eigenen Templates abgeschlossen habe ;). Soweit ich mich erinnere, lag hier das Problem genau so wie von @mlweb beschrieben, die Abhängigkeiten werden nicht überprüft. Das hat mich damals nicht groß gestört, weil ich beim Aufbau der Site die zu importierenden Dateien ab einem relativ frühen Zeitpunkt nicht mehr ändern musste. Ich werde jetzt, falls das Problem in Contao 4.9 immer noch das selbe ist wie in 3.5, mal einen alternativen Ansatz mit SASS auf dem Server, einbinden der kompilierten CSS-Dateien und entwickeln bei aktiviertem sass watch probieren und ggf berichten. Kann eine Weile dauern, meine letzten Versuche mit SASS auf dem Server sind schon einige Jahre her. Muss erst mal wieder schauen, wie ich das dann konfigurieren muss. Hoffentlich wird das entsprechende Webhosting dort nicht gleich wegen Abuse gesperrt wegen des dann notgedrungen längere Zeit laufenden sass-Prozesses :rolleyes:.
12.04.2020, 16:21
Franko

Hierzu auch:
https://community.contao.org/de/show...l=1#post509815
bzw.:
https://community.contao.org/de/show...l=1#post508012
(und Beiträge davor ...)
16.04.2020, 20:25
tab

Zitat:

Zitat von tab

Ich werde jetzt, falls das Problem in Contao 4.9 immer noch das selbe ist wie in 3.5, mal einen alternativen Ansatz mit SASS auf dem Server, einbinden der kompilierten CSS-Dateien und entwickeln bei aktiviertem sass watch probieren und ggf berichten. Kann eine Weile dauern, meine letzten Versuche mit SASS auf dem Server sind schon einige Jahre her. Muss erst mal wieder schauen, wie ich das dann konfigurieren muss. Hoffentlich wird das entsprechende Webhosting dort nicht gleich wegen Abuse gesperrt wegen des dann notgedrungen längere Zeit laufenden sass-Prozesses :rolleyes:.

So, habe das Projekt jetzt mal umgestellt wie oben beschrieben. Habe jetzt ein Verzeichnis für die SCSS-Dateien und eins für die daraus erzeugten CSS-Dateien. Die CSS-Dateien binde ich jetzt anstatt der SCSS-Dateien im Seitenlayout ein. Mit sass --watch scss:css& in meinem Theme-Verzeichnis (da sind die Verzeichnisse scss und css drin) wird die Überwachung des scss-Verzeichnis gestartet, bei Änderungen wird das CSS neu erzeugt. Ich kann jetzt mein _color.scss Partial ändern und entweder in der Frotend-Vorschau auf "Anwenden" klicken oder auch in einem anderen Tab, Fenster oder auch Browser einfach neu laden und die Farbänderung in meinem Partial _color.scss wird dann angezeigt. Muss ich jetzt mal schauen, welche Nebenwirkungen das hat, aber bisher sieht es gut aus. Für IE oder Edge bringt das freilich nicht automatisch eine Verbesserung, das muss man dann schon selbst entsprechend ändern. Aber immerhin kann ich (bisher) problemlos meine SCSS-Dateien online in der Dateiverwaltiung oder einem sonstigen Editor ändern und die Änderungen werden sofort im CSS umgesetzt und sind nach Neuladen der Seite sichtbar.

Ich lasse es jetzt erst mal so, vielleicht kommen ja noch ein paar Pferdefüße zum Vorschein. Ach ja, das Zusammenfassen der Dateien habe ich momentan ausgeschaltet. Werde ich wahrscheinlich auch später so lassen, wofür gibt's HTTP/2.