less变量修改后样式未更新，根本原因是其在构建阶段已被静态替换为固定值，运行时不存在；需确保变量文件被正确依赖、触发重编译，并验证css是否真实更新及浏览器是否加载新版本。
Less变量修改后样式没更新，不是缓存或代码写错这么简单——根本原因是@primary-color这类变量在构建时就被替换成固定值，运行时根本不存在，改了源码但没触发重编译，浏览器当然还用着旧CSS。
Less变量修改后为什么CSS文件没变
Less是预处理器，不是运行时系统。@primary-color: #007bff;在lessc或less-loader处理阶段就全部替换成#007bff，最终输出的app.css里搜不到@primary-color这个符号。
- Webpack项目：改
variables.less后必须确保它被列为main.less的依赖，否则less-loader不会重新编译 - 命令行编译：
lessc variables.less main.less > app.css才有效；如果只跑lessc main.less，变量改动完全无效 - VS Code插件：部分实时编译插件会缓存变量值，改完
@version后需手动刷新或重启插件
浏览器里样式还是旧的，到底卡在哪
即使CSS文件已重新生成，浏览器也可能继续用缓存版本。关键看Network面板中.css请求的状态码和响应头：
- 状态码是
304？说明服务器返回了缓存协商响应，实际没传新内容 - 响应头有
Cache-Control: max-age=31536000？这是长效缓存，强制刷新（Ctrl+Shift+R）也绕不过 - 路径写错导致404？Network里看到
style.css是404或返回HTML内容，说明根本没加载到CSS
临时验证方法：在<link>的href后加?v=20260727，确保浏览器当作新资源请求。
为什么开发者工具里看到样式“被划掉”却以为没生效
样式被划掉（strikethrough）不等于没加载，而是被更高优先级规则覆盖。常见陷阱：
-
<link>引入顺序错误：你改的theme.less编译成的CSS在bootstrap.css之后引入，它的.btn规则自然被后者覆盖 - 选择器权重不足：用
.button写的样式，被#header .button或.button:hover盖掉 - 用了
!important掩盖问题：这会让后续维护更难，真正该做的是调整引入顺序或提升选择器特异性
在Elements面板点开目标元素，右侧Styles栏里点文件名能直接跳转到对应CSS行，确认来源是否真是你刚改的文件。
Less变量命名和作用域导致的静默失效
Less变量没有作用域隔离，改一个变量可能全站变样，而且不报错：
- 在
buttons.less里写@primary-color: #e74c3c;，后面所有@import的文件都会用这个值——header.less、form.less全跟着变 -
.button { @primary-color: red; color: @primary-color; }这种写法无效，块内声明不改变查找路径，也不会局部生效 - 声明漏了分号：
@spacing-xs: 4px（缺;）会导致该行及之后所有变量被跳过，但Less不报错
安全做法是加前缀：@btn-primary-bg、@header-title-color，杜绝泛义名；多人协作时，变量命名必须严格一致，大小写、连字符都不能错。
真正难的不是改一行@primary-color，而是四层咬合：Less源码改了、构建流程真重编译了、浏览器真加载了新CSS、JS读写的--primary-color和它对得上——漏任何一环，样式就卡在旧状态不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
