刷新网站时样式表未更新

Posted 2023-02-15

【中文标题】刷新网站时样式表未更新

【英文标题】：Stylesheet not updating when I refresh my site

【发布时间】：2012-09-24 22:36:12

【问题描述】：

我正在创建一个网站，但是当我对网站上的样式表进行更改并刷新网站时，没有任何更改。

我尝试使用查看源工具检查stylesheet.css，它也没有更新。但是当我转到系统的根目录时。

我必须等待至少 20 分钟才能在我的网站上看到更新，谁能告诉我为什么我没有立即看到更改？我的浏览器、计算机或服务器有问题吗？

我也尝试删除我的 cookie、缓存和历史记录，但仍然没有用。

【参考方案1】：

如果您的网站还没有上线，而您只是想按自己喜欢的时间间隔更新样式表，那么请使用：Ctrl + F5。

在 Mac OS（在 Chrome 中）使用：Cmd + Shift + R。

这将强制您的浏览器重新加载并刷新与网站页面相关的所有资源。

因此，每当您更改样式表中的某些内容并想查看新结果时，请使用它。

【讨论】：

按住 Shift 键的同时点击刷新按钮会强制浏览器下载所有服务器文件；清除缓存并使用任何较新版本进行更新。 SHIFT/REFRESH 适用于 Mac/PC....任何操作系统，任何浏览器。

【参考方案2】：

很可能该文件只是被服务器缓存。您可以禁用缓存（但记得在网站上线时启用它），或者修改link 标签的href，这样服务器就不会从缓存中加载它。

如果您的页面是由某种语言（如 php）动态创建的，您可以在 href 值的末尾添加一些变量，例如：

<link rel="stylesheet" type="text/css" href="css/yourStyles.css?<?php echo time(); ?>" />

这会将当前时间戳添加到文件路径的末尾，因此它将始终是唯一的，并且永远不会从缓存中加载。

如果你的页面是静态的，你必须自己管理这些变量，所以使用类似的东西：

<link rel="stylesheet" type="text/css" href="css/yourStyles.css?version=1" />

对文件内容做一些修改后，将version=1改为version=2等等。

如果您希望从缓存 css 文件中禁用缓存，请参阅您的服务器类型文档（在 apache、IIS、nginx 等上的做法不同）或在 https://serverfault.com/ 上提问/搜索问题

假设 IIS - 在 下添加密钥并在根目录或相关文件夹中使用正确的设置就可以了。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <caching enabled="false" enableKernelCache="false" /> <!-- This one -->
    </system.webServer>
</configuration>

也就是说，有时仍然需要回收应用程序池来“碰撞”CSS。因此：单独禁用 IIS 缓存并不是 100% 保证的解决方案。

对于浏览器：fine-grain controlling the local cache on FF 上面有一些注释，SuperUser 有兴趣。

【讨论】：

由客户端而不是服务器缓存。

你拯救了我的一天，谢谢！它也适用于 javascript 脚本。

【参考方案3】：

查看文件是否被缓存的最简单方法是将查询字符串附加到<link /> 元素，以便浏览器重新加载它。

为此，您可以将样式表引用更改为类似

<link rel="stylesheet" type="text/css" href="/css/stylesheet.css?v=1" />

注意v=1 部分。您可以在每次制作新版本时更新它，看看它是否确实被缓存了。

【讨论】：

这里要添加一些东西，而不是每次都改变数字v=1，设置v = Math.random() 这样，每次都会生成一个新数字。

【参考方案4】：

这可能不是 OP 的问题，但我遇到了同样的问题并通过在我的 cpanel 上刷新然后禁用 Supercache 来解决它。也许像我这样的其他新手不会知道许多托管服务提供商会缓存 CSS 和其他一些静态文件，并且这些缓存的旧版 CSS 文件会在您在服务器上编辑文件后在云中保留数小时。如果您的网站在您编辑旧版本的 CSS 文件后提供它们，并且您确定您已清除浏览器缓存，并且您不知道您的主机是否正在缓存内容，请在尝试其他任何内容之前先检查一下复杂的建议。

【讨论】：

好消息。假设cpanel。问题或标签中没有提到 cpanel

【参考方案5】：

我也遇到过类似的问题，只是因为更新太慢而让我更加恼火。在网站上工作以挽救我的生命时，我无法让我的更改生效（尝试各种方式清除我的浏览器缓存和 cookie），但如果我在当天晚些时候回到该网站或打开另一个浏览器，那里他们是。

我还通过在主机的 cpanel (Siteground) 上禁用 Supercacher 软件解决了这个问题。您还可以在禁用之前对各个目录使用“刷新”按钮来测试是否是它。

【参考方案6】：

在我的例子中，由于我无法将缓存破坏时间戳附加到 css url，结果我不得不手动刷新 IIS 7.5.7600 中的应用程序池。

追求所有其他途径，直到完全禁用站点和本地浏览器的缓存（就像完全禁用两者一样），仍然没有成功。同样“重新启动”该网站也无济于事。

和我一样的位置？ [Site Name] > “Application Pool” > “Recycle” 是您最后的手段...

【参考方案7】：

如果它被缓存在服务器上，则您无法在浏览器中执行任何操作来解决此问题。您必须等待服务器重新加载文件。您甚至无法删除文件并重新上传。如果您使用像 Cloudflare 这样的缓存服务器，这可能需要更长的时间（它甚至可以在服务器重启后继续存在）。你可以重命名它并加载一个副本。

【讨论】：

我想这可能是检查 CloudFlare 或 CDN 上缓存内容的更好选择。

【参考方案8】：

这可能是您的服务器配置的结果，一些托管服务提供商在您的域上启用了"Varnish"。此缓存 HTTP 反向代理，用于speed up delivery。可以尝试禁用 cpanel 上的清漆（假设您有一个）并检查是否是这样。

【参考方案9】：

我遇到了同样的问题，我使用 000webhost 来托管我的网站，我也使用 cloudflare。我已经从浏览器中禁用了所有缓存设置，然后尝试更改一些 css 并通过硬刷新重新加载页面（shift + 单击刷新按钮、ctrl + f5 等）没有任何改变.

原来问题来自 cloudflare 缓存。如果您使用的是 cloudflare，您可以在 cloudflare 中启用开发模式，它会暂时绕过您的缓存，让您可以实时查看源服务器的更改。

对于仍然遇到这个问题的人，我希望这可以帮助你

【参考方案10】：

作为参考，我在 Windows 11 机器上开发，首先运行以下 2 个命令

$env:NODE_ENV="开发"

$env:TAILWIND_MODE="watch"

现在运行您的应用程序

参考如下：https://github.com/tailwindlabs/tailwindcss/issues/4081

【参考方案11】：

![清除缓存]Ctrl+Shift+Delete http://i.stack.imgur.com/QpqhJ.jpg 有时需要进行硬刷新才能看到更新生效。但是一般的网络用户不太可能知道什么是硬刷新，你也不能指望他们继续刷新页面直到事情解决。 这是一种方法：<link rel="stylesheet" href="style.css?v=1.1">

【参考方案12】：

我也遇到了这个问题，很多人似乎建议强制重新加载您的页面，这在您在服务器上运行它等情况下无法解决问题。 我相信这种情况下的最佳解决方案是 给你的 CSS 打上时间戳。

这就是我在 Django 模板中的做法：

<link rel="stylesheet" href="% static 'home/radiostyles.css' %?% now 'U' %" type="text/css"/>

在 CSS 文件末尾添加 ?% now 'U' % 可以解决此问题。

?Wednesday 2nd February 2020 12PM（当前日期）似乎解决了这个问题，我也注意到只是把时间也解决了。

【讨论】：

已经有两个现有答案建议将变量添加到 CSS 文件路径中。

【参考方案13】：

我有同样的问题。原因之一是，我的应用程序被缓存并且我正在执行本地构建。

如果上述 cmets 都不起作用，我更愿意删除 css 文件并重新添加并进行更改。

【参考方案14】：

首先，尝试强制重新加载或清除缓存和空追和硬重新加载。您可以通过按 F12 然后右键单击它来完成。

第二个解决方案：检查您的 html 基础标记。您可以通过here了解更多信息。

【参考方案15】：

不要更新 style.css 中的样式，而是创建自己的新样式表并导入 style.css

your-own-style.css
      .body
           /*any updates*/
       

在style.css中导入你自己的style.css

@import url("your-own-style.css");