Есть ли способ использовать @import для кэша файлов CSS безопасно? - PullRequest
Новая
       6

Есть ли способ использовать @import для кэша файлов CSS безопасно?

0 голосов
/ 17 января 2019

Я хочу знать, если есть способ использовать команду @import с параметром, который обеспечивает загрузку файла css с сервера?

Я уже передал файл css, который включает в себя команду @import, переменную: 

<link rel="stylesheet" href="/frontend/css/main.css?v=<?=VERSION?>" >

В файле css я мог сделать это только жестко: 

@import "include/layout.css?v=123";
@import "include/navigatioin.css?v=123";

Все это работает на сервере apache в php7, если это помогает.

Есть идеи?

1 Ответ

0 голосов
/ 18 января 2019

Я полагаю, что единственный способ заставить перезагрузить css - это изменить версию в URL-адресе импорта, как вы упомянули в своем вопросе.

Не уверен, поможет ли это, но , используя php и apache, вы можете использовать filemtime() вместе с правилами перезаписи, чтобы автоматически обновлять имя версии css всякий раз, когда в файл вносятся изменения.

Вот пример: 

// Pass in the url path to the file '/frontend/css/main.css' for example
function css_auto_version($file) {
    // Return $file if the path is faulty to prevent errors.
    if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
        return $file;

    // filemtime() returns a timestamp showing the last time the file was changed.
    $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);

    // return '/frontend/css/main.TIMESTAMP.css'
    return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

Затем в файле .htaccess для корня документа необходимо добавить следующее: 

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css)$ $1.$2 [L]

Это правило переписывания в основном говорит apache вместо '/frontend/css/main.TIMESTAMP.css' в '/frontend/css/main.css'.

Теперь вы можете использовать эту функцию в своем шаблоне php следующим образом echo css_auto_version('/frontend/css/main.css');, и имя файла в пути всегда будет включать отметку времени последнего изменения файла. Любой браузер с более старой версией в кэше будет считать, что это совершенно другой файл, и перезагрузить его с сервера Правило перезаписи удалит отметку времени в запросах и позволит серверу найти правильный файл CSS и отправить его обратно в браузер.

Поскольку вы не можете использовать php внутри css-файла, вам, вероятно, придется включить правила @import в тег style в HTML и включить туда php.

Подробнее о filemtime можно прочитать здесь https://www.w3schools.com/php/func_filesystem_filemtime.asp

Если вы действительно хотите просто всегда принудительно перезагружать файл, независимо от того, изменился ли файл на самом деле, тогда я бы предложил установить заголовки http как no-cache в ответе. Подробнее об этом вы можете прочитать здесь:

HTTP Cache-control https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

PHP header () https://www.w3schools.com/php/func_http_header.asp

Надеюсь, это поможет!

...