less变量没生效是因为编译链断裂：变量未在使用前通过顶部@import同步加载，或单文件组件作用域隔离导致不可见，实际是编译中断后原样输出@primary-color而非生成css。
Less变量没生效，90%不是写错了，而是根本没编译进去——你看到的@primary-color，是编译器报错中断后原样吐出的源码，不是 CSS。
为什么@import了变量文件却报variable is undefined
Less 的 @import 是线性展开、无预加载的。它不看文件物理位置，只看代码执行顺序：变量必须在使用前定义，哪怕只差一行，也会失败。
- 错误写法：
.btn { color: @primary-color; }写在@import "vars.less";前面 → 编译到这行时变量还没出现 - 正确做法：所有入口 Less 文件（如
main.less）第一行必须是@import "vars.less";，且该文件不能为空或只有注释 - 警惕
@import (reference)：它不会执行变量声明，只注入 mixin，对解决变量未定义无效 - 检查是否误用连字符：
@btn-primary-color会被解析为@btn - primary - color（减法），应改用@btnPrimaryColor或加引号@'btn-primary-color'
Vue / React 单文件组件里@primary-color还是undefined
每个 <style lang="less"></style> 是独立编译上下文，不继承项目级变量。你在 src/styles/vars.less 里写的变量，对 Button.vue 完全不可见。
- 手动导入最直接：
@import "@/styles/vars.less";必须写在组件<style></style>块的第一行 - 推荐全局注入：Webpack 中配置
less-loader的additionalData；Vite 中必须用path.resolve(__dirname, 'src/styles/vars.less')，@/别名在 Less 引擎里完全无效 - Vite 用户特别注意：
additionalData: `@import "@/styles/vars.less";`静默失败，必须 resolve 绝对路径，否则控制台不会报错，但@debug也不会输出 - 别指望
scoped阻止变量注入——只要additionalData配对正确，scoped 样式一样能用上全局变量
生产环境 CSS 里还残留着@primary-color占位符
说明 Less 编译流程断了。构建产物中出现原始变量名，等于告诉你是编译器中途放弃了，不是 CSS 覆盖问题。
- 检查最终产出的
.css文件：搜索@primary-color，如果存在，确认less-loader是否启用、版本是否匹配（Webpack 5 需less-loader@8+） - 确保
javascriptEnabled: true已显式开启——Less 6+ 默认为false，不开则@import被忽略 - Webpack/Vite 中若同时配了
modifyVars和additionalData，后者优先级更高，前者可能被覆盖，别混用同一变量名 - 清缓存再验证：浏览器或 CDN 可能缓存了旧 CSS，先硬刷新或禁用缓存确认是否真没更新
真正难排查的点，往往藏在“看起来没问题”的地方：一个空的 theme.less、一个拼错的 @import "~antd/lib/style/themes/default.less"、或者 monorepo 里 __dirname 指向了错误包目录。变量没生效不是语法问题，是编译链断裂——得顺着 import 路径一层层确认是否真的加载进来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
