应使用Cache-Control响应头配合哈希化文件名实现CSS强制更新：对带哈希的CSS设public, immutable, max-age=31536000，构建时用contenthash生成唯一文件名并由插件自动注入HTML，服务端按文件类型差异化配置缓存策略。
用 Cache-Control 和版本号路径强制更新 CSS
浏览器缓存 CSS 是导致样式不生效的最常见原因，不是代码写错了，而是用户本地还挂着旧文件。光靠改 CSS 内容没用，得让浏览器“认出这是新文件”。核心就两条：HTTP 响应头控制缓存策略 + URL 变更触发重新下载。
-
Cache-Control: public, max-age=31536000对带哈希或版本号的 CSS 文件很安全——它告诉浏览器“这个文件一年内都不会变”，所以可以大胆缓存 - 但对
style.css这种无版本名的文件，别设太长的max-age，否则改完部署，用户刷十次都不生效 - 路径里加版本参数（如
style.css?v=2.1.3）效果有限：部分代理和 CDN 会忽略查询参数，且浏览器可能复用缓存 - 更可靠的是文件名嵌入哈希，比如
style.a8f3b2d.css，构建时自动生成，URL 变了，缓存自然失效
Webpack/Vite 构建时自动加哈希后缀
手动改文件名不现实，必须交给构建工具。关键不是“能不能加”，而是“加在哪”和“要不要影响 HTML 引用”。
- Webpack 中配置
output.filename和output.chunkFilename，用[contenthash]而非[hash]——前者基于文件内容，内容不变哈希就不变 - Vite 默认已启用
build.rollupOptions.output.entryFileNames的[hash]，但建议显式改成[name].[hash:8].js和[name].[hash:8].css，方便排查 - HTML 中的
<link rel="stylesheet">必须由构建工具自动注入，不能手写静态路径，否则哈希变了但 HTML 没更新，反而 404 - 如果用
html-webpack-plugin或 Vite 的html插件，它会自动替换index.html里的引用，前提是你的link标签没写死路径
服务端 Nginx/Apache 配置缓存头要分文件类型
光靠前端构建不够，服务端响应头没配对，浏览器照样缓存错。重点不是“全开缓存”或“全禁缓存”，而是按资源类型区别对待。
- 对带哈希的 CSS（如
main.abc123.css），Nginx 加：location ~* \.css$ { expires 1y; add_header Cache-Control "public, immutable"; } - 对不带哈希的
style.css，或者开发环境的 CSS，设短一点：location = /style.css { expires 1m; add_header Cache-Control "no-cache"; } -
immutable很关键：它告诉 Chrome “这文件真不会变”，浏览器连ETag都不发，省一次请求；但只适用于带哈希的长期缓存资源 - Apache 用户注意：
mod_expires要开启，且.htaccess里匹配规则别被上级目录覆盖
本地开发热更新失效？检查 cache-control 和 service worker
开发时改了 CSS 看不到效果，大概率不是构建问题，而是本地环境干扰。尤其用过 PWA 或 Create React App 的项目，service worker 容易劫持请求。
立即学习“前端免费学习笔记（深入）”；
- 先打开 DevTools → Application → Service Workers，点
Unregister，再硬刷新（Ctrl+Shift+R或Cmd+Shift+R） - 检查 Network 面板里 CSS 请求的
Response Headers，确认没有意外的Cache-Control: immutable或超长max-age - Create React App 默认在生产环境注册 service worker，但开发时不该启用；如果误启，删掉
src/index.js里serviceWorkerRegistration.register()这行 - 某些编辑器（如 VS Code Live Server）默认不发缓存头，但会加
Cache-Control: no-cache，这反而导致每次请求都走网络——不是 bug，是设计如此
真正麻烦的不是加哈希或配 header，而是前后端协作断点：构建生成了 app.f3a8c.css，但 HTML 里还是 app.css；或者 Nginx 把所有 CSS 都设成一年缓存，结果忘了开发分支压根没哈希。这类问题往往卡在“以为配好了”，其实漏了一环。
