less变量修改后样式未更新，根本原因是其在构建阶段已被静态替换为固定值，运行时不存在；需确保变量文件被正确依赖、触发重编译，并验证css是否真实更新及浏览器是否加载新版本。
Less变量改了但页面没变，先确认是否真重新编译了
Less不是运行时解析的，@primary-color这类变量在构建阶段就被替换成具体值，输出的 CSS 文件里根本搜不到变量名。改了 variables.less 却没触发重编译，等于什么都没做。
检查点列在下面：
- Webpack 项目中，确保
variables.less被@import进主入口（比如main.less），否则less-loader不会监听它 - 命令行编译时别只跑
lessc main.less，得带上所有依赖：lessc variables.less main.less > app.css - VS Code 的实时编译插件可能缓存旧值，改完变量后手动保存全部相关文件，或重启插件
- 打开生成的
app.css，直接搜索你改的色值（比如#e74c3c），确认它是否已出现在文件里
CDN 缓存没刷新，v= 参数可能被完全忽略
你加了 style.css?v=20260818，但用户还是看到旧样式——大概率是 CDN 或 Nginx 没把查询参数算进缓存键。它把 style.css?v=1 和 style.css?v=2 当成同一个 URL 缓存了。
验证方法很直接：打开 DevTools → Network → 找到那个 CSS 请求，看响应头：
- 如果
X-Cache: HIT且Age很大（比如几百秒），说明缓存来自 CDN，不是浏览器 - Cloudflare：进「Cache Rules」，关掉「Ignore query string」
- Nginx：检查
proxy_cache_key是否含$args，正确写法是proxy_cache_key "$scheme$request_method$host$request_uri$args"; - SCDN 或私有 CDN：找「query string cache policy」或「是否区分查询参数」设置项
靠 v= 参数不如直接改文件名
查询参数方案脆弱，一环出错就全链路失效。真正可靠的解法是让文件 URL 随内容变化，天然绕过所有缓存层。
构建工具配置要点：
- Webpack：用
mini-css-extract-plugin提取 CSS，并确保output.filename含[contenthash]，例如main.[contenthash:8].css；HTML 插件启用inject: true - Vite：在
vite.config.ts中设build.rollupOptions.output.assetFileNames为"assets/[name].[hash].css"；若开启cssCodeSplit，还需同步配entryFileNames和chunkFileNames - 服务端缓存头配
Cache-Control: public, max-age=31536000, immutable，告诉 CDN 和浏览器“这文件永不变”，后续更新靠 URL 变化驱动
本地有效、上线失效？问题一定出在中间层
localhost 下一切正常，一上 CDN 就卡住旧样式，说明代码本身没问题，而是部署链路上某一层缓存没同步。
排查顺序必须倒着来：
- 先看 Network 面板，确认浏览器发出的请求 URL 真的是带哈希或
v=的，且状态码是200（不是304） - 再查响应头，重点看
Cache-Control、X-Cache、Age，判断缓存来源是 CDN 还是源站 - 如果是多 CDN 架构（比如主用 jsDelivr + fallback BootCDN），两边都得手动刷新路径，否则 fallback 会加载旧版本
- CDN 刷新不等于立刻全网生效，有些节点异步同步需几分钟；别用
/*通配符刷全站，可能触发风控限频
最常被忽略的一点：CDN 节点有地域性，华东刷完了，华北用户可能还在用旧缓存。上线后别只测一个地区，至少覆盖两个以上边缘节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
