Less变量是编译期替换而非运行时响应式，修改@primary-color无效主因是变量未在antd.less加载前生效；需检查@import顺序、craco-less配置、Vite的math选项及嵌套选择器真实性。
为什么改了变量样式却没变
Less变量是编译期替换，不是运行时响应式值。改了@primary-color但按钮还是蓝色，大概率是变量没在antd.less加载前生效——它已经被按默认值编译完了。
常见错误包括：@import 'antd/dist/antd.css'还留在入口里；@import顺序写反（变量声明在antd.less之后）；或用craco-less但没配modifyVars把变量传给less-loader。
- 检查DevTools「Computed」面板，看最终生效的color是否来自你定义的变量，而不是
ant-xxx类的硬编码值 - 确认
theme.less在所有其他样式import之前，且路径拼写正确（比如~antd/lib/style/themes/default.less少个/就静默失败） - Vite项目需显式设
math: 'always'，否则Less 4.x默认的parens-division会让@font-size-base / 2这类计算被跳过
嵌套生成的选择器为何还是被覆盖
& &嵌套确实能提升权重，但前提是它真被编译出来。写.my-page { & & { .ant-btn { color: red; } } }本意是生成.my-page.my-page .ant-btn，但如果父选择器本身带动态class（如data-v-xxx或react-root），这个双重类名就匹配不上真实DOM。
更隐蔽的问题是：嵌套层级太深，比如.a { .b { .c { .d { ... } } } }，编译后选择器过长，某些旧版浏览器会截断或忽略。
立即学习“前端免费学习笔记（深入）”；
- 用DevTools「Elements」面板右键「Copy selector」，粘贴到样式文件里对照——别凭记忆写嵌套
- 避免三层及以上
&嵌套：& & &产出.x.x.x，冗余且无实际增益 - 若用Vue
<style scoped>，& &生成的类名会被加上data-v-xxx属性，权重虽高但结构依赖编译输出，不稳定
用了::v-deep却没穿透成功
Vue 3中/deep/和::v-deep（不带括号）已被废弃，必须写成::v-deep(.target)。括号里只支持简单选择器，::v-deep(.a .b)或::v-deep(div > span)会直接失效，编译后连CSS规则都不生成。
另一个坑是：写了::v-deep(.van-button)，但组件内部实际渲染的是<button class="van-button van-button--primary">，你只匹配了基础类，漏掉了--primary这种状态类。
- 打开DevTools「Elements」，展开子组件节点，复制最内层元素的真实class，再填进
::v-deep()括号里 - 不要跨多层写深度选择器，比如
::v-deep(.parent .child .target)——它要求DOM结构完全一致，任意一层class变动就失效 - 如果目标组件用CSS-in-JS（如Ant Design 5.x），
::v-deep可能根本不起作用，得换StyleProvider或外层加唯一class再嵌套
多个@import文件里同名规则谁赢
Less的@import本质是文本拼接，后import的文件，其CSS规则在最终输出里位置靠后。同权重下，靠后的规则自然覆盖前面的——这是最底层、最可靠的覆盖机制，但容易被忽略。
问题在于：很多人以为@import (reference)能“安全引入变量”，其实它只是不输出CSS，变量仍会注入全局作用域。你在a.less里@import (reference) 'vars.less'，又在b.less里重定义@primary-color，那么后续所有@import的文件都会用b.less里的新值。
- 把重置、工具类放最前，组件样式居中，页面级定制放最后——顺序即优先级
- 避免在不同文件里重复定义同一选择器，比如
.btn在base.less和override.less里都出现，后者未必能赢，得看@import顺序 - 用
@import (reference)只抽离mixin和函数，别放变量；变量统一收口在variables.less里，且只@import一次
真正难排查的，往往不是语法错误，而是编译链断裂——变量没注入、数学计算被跳过、深度选择器被误写成伪类。每次改完Less，先看生成的CSS文件，再比对DevTools里实际生效的规则，比盯着源码猜快得多。
