Externe CSS im Cache auch mit Debug-Mode

[Floxn]

Affected version(s)
4.8.3

Description
Wenn eine extern eingefügte CSS eingebunden ist und diese aktualisiert wurde wird diese im Debug-Mode nicht neu geladen sondern aus dem Cache genommen. Im Browser selbst ist der Cache auch aus.
Es hilft nur in der Systemwartung den Skriptcache leeren.

How to reproduce
CSS Datei extern einbinden und abändern. Im Debug-Mode die Seite mit der Änderung aufrufen.

[TS16V]

Teilweise hilft sogar die Systemwartung nicht, um die externen geänderten CSS / SASS Dateien im Debugmodus aktualisiert anzuzeigen. Der Fehler tritt sporadisch auf., also mal gehts, mal nicht.

[leofeyer]

Hast Du die Webseite über die Frontend-Vorschau (preview.php) aufgerufen?

[TS16V]

Hallo, Ja, so wie im Screen in der Anlage. Wenn ich dann eine Seite mit KLICK auf Vorschau neu erhalte, mache ich dann die CSS-Änderungen mit F5. Das Ganze funktionier mal und mal nicht. VG Thomas

[Floxn]

ja, auch über preview.php
Bei mir funktioniert das nie :)

[leofeyer]

Wie genau lautet der Pfad zur der CSS-Datei, wenn Contao diese im HTML-Code einbindet?

[contaoacademy]

Im Moment konnte ich dein Problem noch nicht reproduzieren.

Kannst du mir mehr zu diesen Punkten sagen:

• Nutzt du SCSS-Dateien oder CSS-Dateien?
• Ist die Option Skripte zusammenfassen aktiviert oder deaktiviert?
• Hast du in der Seitenstruktur das Caching aus?
• Arbeitest du Lokal oder direkt Online?
• Falls direkt Online, gibt es auf dem Server deines Hosters ggf. noch ein Caching?

[TS16V]

Hi, der Pfad im HEAD-Bereich lautet:   <link rel="stylesheet" href="assets/css/files_layout_scss_zentrale.scss.css?v=e59e2678"> VG Thomas

[TS16V]

Hi,  - ich nutze Dateien im Format .scss, die dann in einer zentralen Datei zentrale.scss zusammenlaufen  <link rel="stylesheet" href="assets/css/files_layout_scss_zentrale.scss.css?v=e59e2678"> - die Option "Skripte zusammenfassen" ist deaktiviert, da ich HTTPS verwende. (wie im Schulungs-Video beschrieben wurde) - In der Seitenstruktur beim Startpunkt ist im Bereich "Cache-Einstellungen" die "Cachzeiten festlegen" nicht aktiviert - ich arbeite online - mein Hoster ist Mittwald, und da hab ich auf die Frage bezgüglich des Chaching folgende Antwort erhalten: Antwort von Mittwald: "Das Servercaching in Form von OPCache und APCu steht Ihnen zur Verfügung, sobald eine PHP-fpm Version im Einsatz ist. Je nach System müsste das jeweilige System dann noch so konfiguriert werden, dass es mit dem Servercaching arbeitet." VG Thomas

[TS16V]

Gibt es schon eine Problem-Lösung?
Liese sich im Contao-Manager denn nicht wieder der DEV-Modus aktivieren wir in Contao 4.6?

[ausi]

@Floxn ich kann das Problem nicht reproduzieren. Bei meinem Test werden im Debug-Mode die externen CSS-Dateien direkt im HTML referenziert und müssten dadurch mit deaktivierten Browser-Cache in der aktuellen Version ausgeliefert werden.

Wie sieht der HTML-Code bei dir aus? Es sollte für die externe CSS-Datei ein Link-Tag im folgendem Format ausgegeben werden: <link rel="stylesheet" href="files/pfad/zur/datei.css?v=6fc90116">

[leofeyer]

@TS16V Welche Datei genau änderst Du denn? So wie ich Deinen Use-Case verstehe, hast Du eine zentrale.scss-Datei, in der Du weitere SCSS-Dateien einbindest. Nur wenn Du die zentrale.scss-Datei änderst, bekommt das der Contao-Combiner mit und kompiliert die SCSS-Dateien neu. Wenn Du eine der eingebundenen Dateien änderst, musst Du den Skript-Cache manuell leeren.

[Floxn]

@ausi ich hab das Problem nun nicht mehr. Kann es auch nicht mehr reproduzieren. Was ja gut ist :)

[TS16V]

@leofeyer Genau, es gibt die zentrale.scss, in der SCSS-Dateien eingebunden sind, die entsprechend geändert werden. In der Contao-Version 4.6 gab es ja den DEV-Modus mit domain.de/app_dev.php, bei der Änderungen in den eingebundenen SCSS-Dateien per F5-Taste aktualisiert wurden. Das hat gut funktioniert.

So wie ich das verstanden habe, muß jetzt nach jeder Änderung in einer der eingebundenen SCSS-Dateien jedesmal der Skript-Cache manuell geleert werden, was natürlich bei der Erstellung umständlich und zeitaufwendig ist. Welche Empfehlung bezüglich der Arbeitsweise "Workflow" ist da zu empfehlen, um effektiver voran zu kommen? Sollte ich da lieber die zentrale.scss-Datei löschen und die darin enthaltenen SCSS-Dateien einzeln im Contao-BE > externe CSS einbinden?

[leofeyer]

Sollte ich da lieber die zentrale.scss-Datei löschen und die darin enthaltenen SCSS-Dateien einzeln im Contao-BE > externe CSS einbinden?

Ja, bitte versuch mal, ob das Dein Problem löst.

[TS16V]

Sorry, das funktioniert nicht. Es ist noch Schlimmer:

Ich habe in das Seitenlayout unter EXTERNE Stylessheetsdie die Datei zentrale.css (in der die SCSS-Dateien liegen), entfernt und die SCSS-Dateien einzeln im Seitenlayout eingebunden, genau so in der Reihenfolge wie in der zentrale.css. Es geht nix mehr

Es kommen Fehlermeldungen, wie z.B.:

parse error: failed at $ci_blue_dark; (stdin) on line 108, at column 12

[TS16V]

Ein neuer Testversuch:
Ich habe in den Layouteinstellungen  nun komplett alles mal aus dem externem CSS gelöscht.

Dann habe ich zwei Dateien angelegt:

• color.scss
• typo.scss

In der Color.scss steht:

$ci_red:rgba(204,23,24,1.0);

in der Typo.scss. steht:

h1 {
    color:$ci_red;
}

Im Contao BE / Layouteinstellungen unter externe CSS habe ich die Dateien der Reihe nach eigebunden:

color.scss
typo.scss

Es kommt die Error-Meldung:

Undefined variable $ci_red: line: 3, column: 2

Fazit:

Wenn ich die scss-Dateien über eine zentrale.css einbinde in Contao, dann funktioniert das zwar, aber Änderungen werden nur mit Mühe angezeigt (siehe Problemstellung).
Binde ich die scss-Datein jeweils einzeln im Contao-BE ein, dann geht garnix mehr.

Es war mit Contao 4 und dem alten DEBUG-System mit domain.de/app_dev.php
ein perfektes und flüssiges Arbeiten.

Wie lässt sich das Problem lösen?

[contaoacademy]

Ich habe mir heute die Installation von TS16V angesehen.

Was ich getestet habe, sieht es so aus, als ob alles funktioniert.
Wichtig ist nur, dass im Browser die Entwickler Console geöffnet bleibt und der Haken "Disable Cache" gesetzt ist.
Dann wurde bei mir Änderungen nach einem Reload immer sofort angezeigt.

Zum Test mit den zwei extra SCSS-Dateien:
Dass die Variable nicht erkannt werd ist nachvollziehbar, da der Compiler die Dateien einzeln abarbeitet und somit keine Zusammenhänge zwischen den beiden Dateien kennt.
Das funktioniert nur, wenn die Dateien einen Zusammenhang mit @import haben bzw. die Variable innerhalb der gleichen Datei ist.

[leofeyer]

Somit kann das Ticket geschlossen werden?

[TS16V]

Wichtig ist nur, dass im Browser die Entwickler Console geöffnet bleibt und der Haken "Disable Cache" gesetzt ist.

Wenn man dies beachtet, dann läuft es flüssiger und relativ stabil.

Aber trotzdem hängt das System bei mir immer mal wieder. Es kann vielleicht damit zusammenhängen, das, wenn die Console ab und an mal geschlossen wird (z.B. um das Ergebnis komplett im Bildschirm zu betrachten), und dann wieder geöffnet wird, es dadurch zu den "Hängern" kommt.

Derzeit habe ich noch den Vergleich zu einer älteren 4er-Version , mit dem alten Debug-Modus
über domain.de/app_dev.php. Hier arbeitet es sich absolut flüssig, auch wenn man die Console schließt und wieder öffnet. Die Änderungen im CSS / SCSS sind im Debug-Modus sofort da bei Aktualisierung des Browsers (F5).

Danke trotzdem für die Hilfe und nützlichen Hinweise.