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

我相信，您可以在问题中提到的更改导入URL中的版本的方法来强制在CSS中重新加载。

不确定是否有帮助，使用php和apache，您可以将filemtime()与重写规则一起使用，以在每次对CSS的版本名称进行更改时自动更新其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”。

现在，您可以在echo css_auto_version('/frontend/css/main.css');这样的php模板中使用此功能，并且路径中的文件名将始终包含文件最后一次更改的时间戳。任何缓存了较旧版本的浏览器都会认为它是完全不同的文件，并从服务器重新加载。重写规则将删除请求中的时间戳记，并让服务器找到正确的CSS文件并将其发送回浏览器。

由于您无法在css文件中使用php，因此您可能必须在HTML的@import标签中包含style规则，并在其中包含php。

您可以在https://www.w3schools.com/php/func_filesystem_filemtime.asp这里了解有关filemtime的更多信息

如果您真的想始终强制重新加载，无论文件是否实际上已更改，那么我建议在响应中设置http头（如no-cache）。您可以在这里了解更多有关此的信息：

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

PHP标头（）https://www.w3schools.com/php/func_http_header.asp

希望有帮助！

有没有一种方法可以使用@import轻松保存CSS文件缓存？

1 个答案: