Браузеры не будут читать обновленные CSS

EDIT: Мои искренние извинения! Это не проблема ни с чем, кроме меня самого. У меня был файл global.css с правильными материалами в нем, но ниже я включил в него еще один файл со старым CSS в бите <head> моего 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 файл просто отлично: -/

Жаль, что так продолжалось, но я хотел быть ясным. Если вам нужно что-нибудь еще, дайте мне знать.

ОТВЕТЫ

Ответ 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')?>" />

Ответ 2

Я использую LESS и Laravel, и, наконец, я нашел хорошее решение:

В теге <head> у меня есть:

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

Затем я также создал класс FileHelper (на основе fooobar.com/questions/519888/...):

<?php

class FileHelper {

    public static function getMostRecentModifiedTimeInFolder($path)
    {
        ///questions/519888/get-filemtime-for-most-recently-updated-file-in-folder/2185972#2185972
        $iterator = new DirectoryIterator($path);
        $mtime = -1;
        foreach ($iterator as $fileinfo) {
            if ($fileinfo->isFile()) {
                if ($fileinfo->getMTime() > $mtime) {
                    $mtime = $fileinfo->getMTime();
                }
            }
        }
        return $mtime;
    }

}

Я мог бы использовать этот подход только на моем локальном сервере разработки и использовать другой подход для производства, чтобы он не всегда проверял метки времени файла при каждой загрузке страницы.

Ответ 3

Поскольку вы не можете управлять кешем браузера, я бы предложил вам предоставить версии в ваш файл css. Как global.1.11.css.