SCSS / Skriptcache

[marcos]

Hallo zusammen

Da Contao ab 3.3 ja eine SCSS Unterstützung mitbringt, arbeite ich neu mit .scss Dateien, was auch super cool ist!
Ein grosser Nachteil ist aber, dass Contao aus den .scss Dateien die CSS Datei erstellt und diese dann im Cache sind. Ich arbeite immer lokal mit meinem Editor und lade die .scss Datei dann per FTP hoch. Da Contao die Dateien aber im Cache hat, muss ich immer wieder bei Systemwartung den Skriptcache leeren. Dieser zusätzliche Klick ist sehr mühsam. Gibt es dafür eine Lösung wie z.B. die Einstellung "Interner Cache umgehen"?

Danke und Gruss
Marco

[Kahmoon]

Während der Entwicklungsphase kannst du Caching von Contao in den Einstellungen deaktivieren. Dort sind es sogar zwei Einstellungen. "Internen Cache umgehen" und "Caching deaktivieren".

Bei mir merkt er aber immer sofort wenn sich eine scss geändert hat. Trotz aktiviertem Cache.

VG

[marcos]

Ach, ich habe überall gesucht und auch mit CTRL + F nach Cache usw. gesucht.
Aber die Einstellung im Dropdown bei Frontend-Einstellungen > Cache-Modus > Cache deaktivieren habe ich völlig übersehen!

Ich habe das nun so konfiguriert. Contao erstellt mir aber immer noch Script-Dateien:

Skriptcache leeren
assets/js: 1 Datei(en)
assets/css: 2 Datei(en)

[MacKP]

Der Interne Cache hat damit nichts zu tun.
Damit Contao die CSS-Datei immer wieder neu generiert brauchst du nur den Debugmodus anzuschalten und gut ist ;-)

Viele Grüße

Edit: Ich mach das so, das ich lokal mit Scss und Compass arbeite und nur noch die fertige CSS Datei hoch lade (die hab ich dann über das Seitenlayout eingebunden). Dann wird mir immer wieder die CSS-Datei mit allen anderen neu erstellt im Debugmodus und gut ist.

Viele Grüße

[Kahmoon]

Najo aber der Debugmodus is irgendwie Kacke....neulich habe ich ewig gesucht warum eine bestimmte Sache in jQuery nicht funktionierte. Als ich dann den Debugmodus deaktiviert habe ging es auf einmal. Scheint wohl ein Konflikt mit Mootools oder so gewesen zu sein obwohl ich Mootools gar nicht verwende...der Debugmodus bindet sie dennoch ein. Seit dem lasse ich ihn lieber aus . Trotzdem aktualisieren sich die SCSS Dateien immer brav.

VG

[MacKP]

Hmm hast das als Bug gemeldet?
Sollte ja nicht so sein.
An sich ist der Debugmodus genau dafür da, das die CSS-Dateien immer neu generiert werden (also auch wenn Cache an ist etc.).

Viele Grüße

[Kahmoon]

Ich habe ihn das erste mal verwendet und war mir nicht sicher ob das ein Bug ist :-)

[marcos]

In Contao 4 funktioniert das etwas anders, da es den Debug-Modus im Backend nicht mehr gibt. Neu muss mit der Symfony Dev-Umgebung gearbeitet werden. Hierzu einfach die Seite mit app_dev.php aufrufen.

Beispiel:
Normal: http://domain.com (ruft eigentlich http://domain.com/app.php auf)
Debug-Modus: http://domain.com/app_dev.php

Der Zugriff auf die Dev-Umgebung ist nur mit einem Login erlaubt. Hierzu die Datei app_dev.php öffnen und einen Access-Key hinzufügen. Eine Anleitung dazu hat's in dieser PHP-Datei bereits.

[rflx]

Damit Contao die CSS-Datei immer wieder neu generiert brauchst du nur den Debugmodus anzuschalten und gut ist ;-)

Hallo MacKP

Kann es sein, dass deine beschriebene Variante nicht funktioniert wenn Theme+ im Einsatz ist? Ich habe mehrere LESS Dateien die ich via @import in eine einzelen importiere und diese dann per Assetic filter in eine CSS Datei umwandle und Rewrite.

Edit: Es funktioniert nur nicht wenn ich Änderungen bei den zu importierten Dateien vornehme (z.B. LESS mixins).

Cheers
rflx

[Spooky]

Bei Theme+ gibt es dafür eine eigene Einstellung in den Einstellungen des Benutzers: Frontend Designer Modus

[rflx]

Hallo Spooky

Vielen Dank für deine Hilfe. Das Frontend Designer Modus kannte ich noch nicht. ^^
Ich hab das jetzt mal ein bisschen getestet; wenn ich diesen Designer Modus aktiviere, aktualisiert sich bei mir nichts mehr. Auch wenn ich versuche den Skriptcache zu löschen.

Ich habe bei mir ca. folgende Umgebung:
slave1.less und slave2.less, etc. werden in master.less via @import importiert. Danach wird die master.less bei Theme+ eingetragen und in CSS mit lessphp generiert. Zusätzlich im Seitenlayout werden die CSS files mit einer Chain Rewritet und komprimiert.

Wenn ich jetzt an der master.less eine Änderung vornehme werden diese so übernommen jedoch nicht die Änderungen bei slave1.less und slave2.less.


Komplizierte Sache ;-)

Danke und cheers
rflx

[Franko]

Ich mach das so, das ich lokal mit Scss und Compass arbeite und nur noch die fertige CSS Datei hoch lade

So gehe ich auch vor - Hierbei ist man dann auch freier hinsichtlich der Sass Versionen.

Ein weiterer Vorteil ist, das es im Contao Debugmodus auch mit den CSS "Source Maps" klappt und
bei eingerichteten Chrome Workspace man auch die (lokalen) .scss files direkt in Chrome bearbeiten/kompilieren (m. autom. Kompilierung via sass watch) kann ...

s.:
https://www.sitepoint.com/using-sour...ug-sass-chrome
https://robots.thoughtbot.com/sass-s...s-chrome-magic

Frank

[Franko]

Die obige Vorgehensweise sollte selbstverständlich auch mit Less funktionieren:

http://robdodson.me/debug-less-with-...eveloper-tools
https://code.tutsplus.com/tutorials/...ols--net-36636

Zudem könnte man dann in Contao eigentlich auf eine entsprechende Erweiterung verzichten ...
Frank

[rflx]

Hallo Franko

Vielen Dank für deine Beiträge. Ich werde mir Gedanken machen wie ich mir meine Umgebung (SCSS/LESS/CSS) für die Entwicklung in Zukunft einrichten werde.
Momentan habe ich es so gelöst, dass ich für die Entwicklung den Inhalt der slave.less in die master.less kopiere und diese danach wieder auslagere. (quick and dirty)
Die LESS Dateien online zu kompilieren hat den Vorteil schnelle Änderungen direkt auf dem Server vorzunehmen.

Cheers
rflx

[Andreas]

Ich habe hier noch ein Snippet mit welchem ich mal experimentiert hatte, vielleicht nützt das ja jemandem. Es steht in der system/config/initconfig.php

/**
 * Delete CSS files in assets/css/ which are older than the newest SCSS file in files/*
 *
 * @author Andreas Burg <http://andreasburg.de/>
 */
if(TL_MODE == 'FE') // check only in FE
{
  // Only if a BE user is logged in
  if(sha1(session_id().(!Config::get('disableIpCheck') ? Environment::get('ip') : '').'BE_USER_AUTH') == Input::cookie('BE_USER_AUTH'))
  {
    $subFolder = '/contaodemo/theme/scss'; // A subfolder of files/ - e.g. /contaodemo/theme/scss

    // Calculate the newest SCSS file time
    $iterator = new RecursiveIteratorIterator(new RecursiveDirectoryIterator(TL_ROOT.'/files'.$subFolder));
    foreach($iterator as $objFile)
    {
      if($objFile->getExtension() == 'scss')
      {
        #dump($objFile->getPathName());
        $lastChange = max($lastChange, $objFile->getCTime());
      }
    }

    // Delete older CSS files in assets/css/
    foreach(glob('assets/css/*.css') as $file)
    {
      if(filectime($file) < $lastChange)
      {
        unlink($file);
      }
    }

  }
}