浏览器不会读取更新的 CSS

Question

编辑：诚挚的歉意！除了我自己之外，这不是任何问题 - 我有一个 global.css 文件，其中包含正确的内容，但在其下面，我在 我的一些 HTML。 Facepalm。

我正在开发一个网站。我正在使用 LESS 来增强我的 CSS，使其更容易编写。问题是，当我更改 .less 文件时，浏览器中呈现的样式拒绝更改。我查看了生成的 .css 文件，并更新以反映所做的更改，但是浏览器不会更新 CSS 文件中的渲染样式。我已经在 Chrome、FF（3 和 4）和 Opera 中尝试过此操作，具有相同的非更新结果。

我什至告诉浏览器不缓存任何内容，无论是 PHP 还是元标记，都无济于事。我的 Apache 配置文件几乎是普通的，尽管我使用多个本地主机（这是本地服务器）。下面给出了用于将 LESS 转换为 CSS 的代码，并且每次重新加载页面时都会运行该代码：

try 
{
    lessc::ccompile('global/global.less', 'global/global.css');
} 
catch(exception $ex) 
{
    exit('lessc fatal error:<br />' . $ex->getMessage());
}

这里没有例外。 less.php 解析器检查文件是否已被修改，我将其删除了一些，但每次更改时都会重新生成 CSS 文件，因此这一定是浏览器某处的缓存问题... Apache 很好地提供了更新后的 CSS 文件 :-/

抱歉说了这么久，但我想澄清一下。如果您还需要任何其他信息，请告诉我。

Answer 1

有一次我在代码中看到使用时间戳来强制浏览器在每次请求时下载 css 和 js 文件，这样：

<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=time()?>" />

?ts=123456789< /code> 每当数字与前一个不同时强制浏览器重新加载文件。

所以我采用了这个想法，但是我使用了文件style.css修改的时间戳，而不是now的时间戳；因此它会缓存在浏览器中，直到在服务器上进行修改：

<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=filemtime('style.css')?>" />

Answer 2

我正在使用 LESS 和 Laravel，我终于找到了一个很好的解决方案：

在我的 标签中，我有：

然后我还创建了FileHelper 类（基于 https://stackoverflow.com/a/6767411/470749）：

<?php

class FileHelper {

    public static function getMostRecentModifiedTimeInFolder($path)
    {
        //https://stackoverflow.com/a/6767411/470749
        $iterator = new DirectoryIterator($path);
        $mtime = -1;
        foreach ($iterator as $fileinfo) {
            if ($fileinfo->isFile()) {
                if ($fileinfo->getMTime() > $mtime) {
                    $mtime = $fileinfo->getMTime();
                }
            }
        }
        return $mtime;
    }

}

我可能决定使用这种方法仅在我的本地开发服务器上使用，并使用不同的生产方法，以便它并不总是在每个页面加载时检查文件时间戳。

Answer 3

由于您无法控制浏览器缓存，我建议您为 css 文件提供版本。像global.1.11.css。