logo标签列表

浏览器无法读取更新后的CSS。

csslessbrowser-cacheupdating
10

编辑：非常抱歉！这个问题并不是其他什么的问题，而是我自己的问题 - 我有一个global.css文件其中包含正确的内容，但在我的HTML的<head>部分内还包含了另一个包含旧CSS的文件。我真是自己坑了自己。

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

我甚至告诉浏览器不要缓存任何东西，使用PHP和meta标签都没有用。我的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文件 :-/

抱歉讲了这么多，但我想表达得清楚。如果您需要其他信息，请告诉我。

3个回答
20

我曾在一份代码中看到使用时间戳强制浏览器在每个请求中都下载css和js文件，方法如下：

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

?ts=123456789可以让浏览器在数字与之前不同时重新加载文件。

于是我采用了这个想法，但我使用的是style.css文件的修改时间戳，以便在服务器上修改之前，将其缓存在浏览器中：

<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=filemtime('style.css')?>" />
这解决了我烦人的问题。谢谢。 - Matthew Hui
1

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

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

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

然后我还创建了一个基于https://dev59.com/HFnUa4cB1Zd3GeqPaXGv#6767411的FileHelper类：

<?php

class FileHelper {

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

}

我可能会决定仅在本地开发服务器上使用此方法，并为生产使用不同的方法，以便它不会在每次页面加载时始终检查文件时间戳。
0

由于您无法控制浏览器缓存，我建议您给您的CSS文件命名版本。例如global.1.11.css。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接