XAMPP本地localhost环境下网页CSS修改不生效问题求助

• 浏览器强缓存：静态资源默认会被浏览器本地缓存，缓存有效期内浏览器不会主动向服务器请求最新文件，直接读取本地缓存内容，所以服务端修改/删除CSS都不会影响前端展示。
• XAMPP服务端缓存：如果Apache开启了mod_cache相关缓存模块，或者PHP开启了OPcache扩展缓存了静态资源引用路径，会导致服务器返回旧的CSS文件内容。
• 304响应判定异常：如果服务器文件修改时间更新存在延迟，会判定资源无更新，返回304 Not Modified响应，通知浏览器继续使用本地缓存。

开发阶段临时方案 #

• 每次修改CSS后使用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，直接跳过本地缓存拉取最新资源。
• 打开浏览器开发者工具（快捷键F12），在「网络」面板勾选禁用缓存，只要开发者工具处于开启状态，页面访问就不会加载旧缓存资源。

永久生效方案 #

• 给CSS资源引用添加动态版本参数，将原引用代码<link rel="stylesheet" href="style.css">修改为带版本号的形式：<link rel="stylesheet" href="style.css?v=1">，每次修改CSS后手动更新版本号数值即可触发浏览器拉取新资源。PHP环境下可以用代码自动生成版本号，无需手动维护：

  <link rel="stylesheet" href="style.css?v=<?php echo filemtime('style.css'); ?>">
  

  上述代码会自动读取CSS文件的最后修改时间作为版本参数，只要文件内容变更，版本参数会自动更新。
• 关闭XAMPP的Apache缓存模块：找到Apache配置文件httpd.conf，注释掉mod_cache、mod_cache_disk相关的加载行，重启Apache后生效。
• 开发环境下配置静态资源禁止缓存规则：在网站根目录新建.htaccess文件，添加如下配置：

  <FilesMatch "\.(css|js)$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
  </FilesMatch>
  

  该规则会要求浏览器不对CSS、JS文件进行缓存，每次访问都拉取服务器最新内容。

内容的提问来源于stack exchange，提问作者Mattias Kundert