Contao-Camp 2024
Ergebnis 1 bis 11 von 11

Thema: Workflow bei der (S)CSS Bearbeitung

  1. #1
    Contao-Fan Avatar von ph!L
    Registriert seit
    04.11.2009.
    Ort
    Internet
    Beiträge
    399

    Frage 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.



    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
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Contao-Fan Avatar von ph!L
    Registriert seit
    04.11.2009.
    Ort
    Internet
    Beiträge
    399

    Standard

    Jein. Lokal hast du ja ein Abbild des Live- oder Dev-Servers laufen. Da stellt sich ja im Prinzip die gleiche Frage.

  4. #4
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  5. #5
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Same here, lokales Asset building. Die SCSS Funktionalität von Contao verwenden wir nie.

  6. #6
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.780
    Partner-ID
    634

    Standard

    Ich verwende Visual Studio Code u.a. mit der Extensions sftp und Live Sass Compiler. Dazu dann noch die Toolbox-Erweiterung von Dennis
    Geändert von stefan-at-work (10.04.2020 um 13:08 Uhr)

  7. #7
    Contao-Nutzer Avatar von Niels H
    Registriert seit
    14.08.2012.
    Ort
    Köln
    Beiträge
    77
    Partner-ID
    11984

    Standard

    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.

  8. #8
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Niels H Beitrag anzeigen
    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  9. #9
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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 .

  10. #10
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  11. #11
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von tab Beitrag anzeigen
    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 .
    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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •