Question

编辑：真诚的道歉！这不是我自己的问题 - 我有一个global.css文件，里面有正确的东西，但是下面我在HTML的<head>位中包含了另一个带有旧CSS的文件。捂脸。

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

我甚至告诉浏览器不使用PHP和meta标签缓存任何内容，但无济于事。我的Apache配置文件几乎是普通的，虽然我使用多个localhosts（这是一个本地服务器）。用于将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强制浏览器在数字与前一个数字不同时重新加载文件。

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

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

Answer 2

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

在我的<head>标记中，我有：

<link rel="stylesheet/less" type="text/css" href="/less/main.less?ts={{FileHelper::getMostRecentModifiedTimeInFolder(realpath(public_path() . '/less'))}}" />

然后我还创建了一个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。

浏览器不会读取更新的CSS

3 个答案: