Drupal主题外观在Chrome/Safari不刷新，Firefox正常的问题求助

这种情况我在Drupal主题开发时踩过好几次坑，Firefox能正常识别CSS变化，但Chrome和Safari非要清Drupal缓存才生效，大概率是Drupal的缓存体系和浏览器缓存策略的双重作用导致的，给你几个实操的解决思路：

1. 关闭Drupal的页面缓存和动态页面缓存 #

即使你关了CSS聚合，Drupal的页面缓存（Page Cache）和动态页面缓存（Dynamic Page Cache）可能还在生效，会把包含CSS链接的HTML页面缓存起来。Chrome/Safari会优先缓存这个HTML，导致即使CSS文件更新了，浏览器拿到的还是旧的链接（或者带旧缓存参数的链接），自然不会去请求新的CSS。

解决步骤：

• 进入Drupal后台的「配置」→「性能」
• 找到「页面缓存」，将「缓存页面的最大年龄」设为「无缓存」
• 同时关闭「动态页面缓存」的选项
• 保存设置后，再修改SCSS测试，应该不用清Drupal缓存就能看到变化了

2. 禁用Drupal静态资源的查询字符串 #

Drupal默认会给CSS/JS文件添加一个查询参数（比如style.css?xxxxxxxx），用来标识文件版本。理论上文件内容变化时这个参数会自动更新，但有时候Compass编译的速度或者Drupal的文件检测机制没跟上，导致参数没变化，Chrome就会认为文件没更新，继续用缓存。

你可以临时禁用这个查询字符串：

• 打开站点根目录的settings.php文件
• 添加以下代码：

  $config['system.performance']['css']['query_string'] = '';
  $config['system.performance']['js']['query_string'] = '';
  

• 保存后，Drupal输出的CSS链接就不会带查询参数了，浏览器每次都会请求最新的文件内容

3. 开启Chrome开发者工具的「禁用缓存」 #

这是开发时的临时调试方案，打开Chrome的开发者工具（快捷键F12），切换到「网络」标签，勾选「禁用缓存」（注意要保持开发者工具处于打开状态才会生效）。这样Chrome在调试过程中会忽略所有本地缓存，直接请求最新的CSS文件，不用每次手动清缓存或者硬刷新。

4. 检查Compass的编译输出设置 #

有时候Compass编译后的CSS文件可能没有正确更新文件的修改时间戳，导致Drupal检测不到文件变化。你可以做个简单排查：

• 打开Compass的配置文件config.rb，确认没有设置会影响文件内容标识的特殊参数（比如no-line-comments这类参数一般不会导致这个问题，但可以排查下）
• 手动修改编译后的CSS文件（比如随便加个空格再保存），然后刷新Chrome看是否能识别变化，以此排除Compass编译的问题

总结 #

最常见的原因还是Drupal的页面缓存或者静态资源查询字符串未及时更新，先试试关闭页面缓存，再配合Chrome开发者工具的禁用缓存，基本就能解决开发时的缓存顽疾。上线前记得把性能设置恢复成生产环境的配置哦！

内容的提问来源于stack exchange，提问作者Auxiliary Joel