CSS不Processwire

Question

更新這是特定於Processwire CMS的一個問題，但實際上我不知道是哪裏的問題恰好可以從

未來我剛開始我的第一個Processwire項目，並設置回到我喜歡的結尾。開始我的網站的前端時，我遇到了一個非常奇怪的問題：CSS文件沒有更新。 我開始了，很快就出現了問題。然後，我簡單地將main.css的內容複製到一個新的main2.css文件中，更改了模板文件中的代碼，然後再次運行。我認爲這是一次我繼續的事情，但問題再次發生並沒有太長時間。 本地文件被更改，我的項目的html代碼正常更新，但是當我檢查頁面時，CSS文件中的更改無處可見。

我使用MAMP創建本地服務器和考拉編譯我的SASS代碼。我是processwire的新手，在web開發人員的職業生涯中還很早，儘管我對發生的事情感到非常困惑，因爲問題只是部分出現在CSS文件中，而不是HTML（或PHP）文件中。

有沒有人有什麼問題的想法？

在此先感謝

Answer 1

這很可能是緩存問題。例如，請閱讀https://varvy.com/pagespeed/leverage-browser-caching.html，瞭解瀏覽器緩存的內容以及它完成的任務。

在此頁面的「常見緩存問題」下，您會發現您的問題。

如果您使用的是Chrome，請打開開發工具（F12），然後在網絡選項卡下選中「禁用緩存」。

在Firefox中打開Firefox Toolbox（也是F12），然後在設置>高級設置下勾選「禁用HTTP緩存，如果工具箱已打開」（我從德國的Firefox中翻譯過）。

之後，對CSS文件進行更改並重新加載頁面。如果您的更改出現，那麼您知道您偶然發現了瀏覽器緩存的一個缺陷。

有很多策略來處理這個「問題」。有些解決方案請參閱https://css-tricks.com/strategies-for-cache-busting-css/。

Answer 2

我在我的_init.php中使用了一些php代碼來將版本號添加到css文件名中。

現在大多數瀏覽器都會將不同查詢字符串的網址看作不同文件並下載新副本。大多數CDN甚至支持並推薦這一點。更多在這裏：css-tricks.com

這裏是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; 

可以輸出它在你的模板

// 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" /> 

我在我所有的ProcessWire模板中使用此。正如@ jmartsch所說，有很多策略，但這個最適合我。 你如何生成你的文件並不重要（我正在使用scss和gulp來生成css）。腳本只是檢查文件是否被修改並輸出更改時間。