css - 有没有办法使用 @import 来保存 css 文件缓存？

Question

我想知道是否有一种方法可以使用带参数的@import 命令来确保从服务器加载 css 文件？

我已经为包含 @import 命令的 css 文件提供了一个变量:

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

在 css 文件中我只能硬编码:

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

如果该信息有帮助，整个过程都在 php7 的 apache 服务器上运行。

有什么想法吗？

Answer 1

我相信您可以在 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.css”中寻找“/frontend/css/main.TIMESTAMP.css”。

现在你可以在你的 php 模板中使用这个函数，就像这样上次更改文件的时间。任何缓存了旧版本的浏览器都会认为这是一个完全不同的文件并从服务器重新加载它。重写规则将删除请求中的时间戳，让服务器找到正确的 css 文件并将其发送回浏览器。

由于您不能在 css 文件中使用 php，您可能必须在 HTML 的 style 标记中包含 @import 规则并包含 php那里。

您可以在此处阅读有关 filemtime 的更多信息 https://www.w3schools.com/php/func_filesystem_filemtime.asp

如果你真的想总是强制重新加载，不管文件是否真的改变了，那么我建议在响应中设置像 no-cache 这样的 http header 。您可以在此处阅读更多相关信息:

HTTP 缓存控制 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

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

希望对您有所帮助!