CSS aktualisiert nicht in Process

Question

Dies ist eine Frage der spezifisch auf den Process CMS aber eigentlich bin ich nicht sicher, wo das Problem vielleicht genau aus

kommen wird, habe ich mein erstes Projekt Process gerade erst begonnen und haben setzt die Back End zu meinem Geschmack. Beim Starten des Frontends meiner Site ist mir ein sehr seltsames Problem begegnet: Die CSS-Datei wird nicht aktualisiert. Ich fing an und bald trat das Problem auf. Ich kopierte dann einfach den Inhalt von main.css in eine neue main2.css-Datei, änderte den Code in der Template-Datei und es funktionierte wieder. Ich dachte, es wäre eine einmalige Sache, die ich fortsetzte, aber es dauerte nicht lange, bis das Problem wieder passierte. Lokal werden die Dateien geändert und der HTML-Code meines Projekts wird normal aktualisiert, aber wenn ich die Seite inspiziere, sind die Änderungen in der CSS-Datei nirgends zu sehen.

Ich benutze MAMP, um den lokalen Server und Koala zu erstellen, um meinen SASS-Code zu kompilieren. Ich bin neu bei processwire und bin immer noch recht früh in meiner Webentwickler Karriere, trotzdem bin ich sehr verwirrt darüber, was passiert, da das Problem nur teilweise in der CSS Datei und nicht in der HTML (oder PHP) Datei auftritt.

Hat jemand eine Idee, was das Problem sein könnte?

Vielen Dank im Voraus

Answer 1

Dies ist höchstwahrscheinlich ein Problem mit Caching ist. Bitte lesen Sie zum Beispiel https://varvy.com/pagespeed/leverage-browser-caching.html, um zu verstehen, was Browser-Caching ist und welche Aufgabe es erfüllt.

Auf dieser Seite unter "Common Caching Problem" finden Sie Ihr Problem.

Wenn Sie Chrome verwenden, öffnen Sie die Entwicklungstools (F12) und aktivieren Sie auf der Registerkarte Netzwerk die Option "Cache deaktivieren".

In Firefox öffnen Sie die Firefox Toolbox (auch F12) und unter Einstellungen> Erweiterte Einstellungen aktivieren Sie "HTTP-Cache deaktivieren, wenn Toolbox geöffnet ist" (Ich habe das aus einem deutschen Firefox übersetzt).

Danach Änderungen in Ihrer CSS-Datei vornehmen und die Seite neu laden. Wenn Ihre Änderungen angezeigt werden, wissen Sie, dass Sie in eine der Gefahren des Browser-Caching geraten sind.

Es gibt viele Strategien, um mit diesem "Problem" umzugehen. Für einige Lösungen schauen Sie sich https://css-tricks.com/strategies-for-cache-busting-css/ an.

Answer 2

Ich verwende ein wenig PHP-Code in meinem _init.php, um die Versionsnummer zu CSS-Dateinamen hinzuzufügen.

Die meisten Browser sehen heutzutage eine URL mit einer anderen Abfragezeichenfolge als eine andere Datei und laden eine neue Kopie herunter. Die meisten CDNs unterstützen und empfehlen dies sogar. Mehr hier: css-tricks.com

Und hier ist PHP:

// Set path and url 
$assets_path = $config->paths->templates . "your-folder/"; 
$assets_url = $config->urls->templates . "your-folder/"; 
$file_css = "app.css"; 

// Generate css version addon 
// Check if file exists and get date of last change 
if (file_exists($assets_path . $file_css)) { 
    $css_version_addon = "?v" . date("His", filemtime($assets_path . 
    $file_css)); // Time of last change 23h 59m 59s in format 235959 
} else { 
    $css_version_addon = "?somethingWentWrong"; 
} 

// Full url with css file and version addon 
$css_with_version = $assets_url . $file_css . $css_version_addon; 

Sie können die Ausgabe in Ihrer Vorlage

// In your template file 
<link rel="stylesheet" href="<?php echo $css_with_version; ?>" /> 
// This will output to something like this 
<link rel="stylesheet" href="/site/templates/your-folder/app.css?v101525" /> 

ich dies in allen meinen Process Vorlagen verwenden. Wie @jmarsch erwähnt hat, gibt es viele Strategien, aber diese passt mir am besten. Es spielt keine Rolle, wie Sie Ihre Datei generieren (ich verwende scss mit Schluck zum Erzeugen von CSS). Überprüfen Sie einfach, ob die Datei geändert wurde und geben Sie den Zeitpunkt der Änderung aus.