theme-dark.less单独编译报错“cannot resolve variable”是因为缺少变量基线声明，必须显式@import variables-base.less提供初始值，且主题文件仅含变量声明与:root桥接，禁含选择器。
直接构建独立 CSS Less 主题包，核心是「变量隔离 + 编译隔离」——主题文件不能依赖组件内部变量，也不能被组件样式反向污染；必须能单独编译出一份只含主题变量、不带任何选择器的 CSS 文件。
为什么 theme-dark.less 单独编译会报错 Cannot resolve variable
常见现象：把 @primary-color: #1e1e1e; 写进 theme-dark.less，然后执行 lessc theme-dark.less theme-dark.css，结果报错。这不是变量写错了，而是它没被任何上下文加载。
-
theme-dark.less本身只是变量赋值，不 import 任何东西，lessc编译时根本不知道@primary-color原本在哪定义过 - 所有主题文件必须显式
@import一个「变量基线声明」文件（如variables-base.less），哪怕那里面只有一行@primary-color: #007bff; - 禁止用
@import (reference)加载基线——它不参与变量解析，只让 mixin 可用；主题变量需要的是「可覆盖的初始值」，不是「不可见的引用」
如何确保主题包输出纯变量 CSS，不含按钮/卡片等样式
主题包的唯一职责是声明和导出变量，不是渲染 UI。一旦出现 .btn { } 或 .u-card，就说明它混入了组件逻辑，不再是“主题”。
- 主题文件里只允许出现：
@color-bg、@space-md、@radius-sm这类变量声明，以及:root { --color-bg: @color-bg; }这类 CSS 变量桥接 - 禁用
@import "components/button.less"——这是组件库的导入链，主题包不该知道组件存在 - 如果要用 CSS 变量方案，必须手动桥接：
:root { --primary-color: @primary-color; --border-radius: @radius-base; }，Less 不会自动把@变量转成--变量 - 验证方式：编译后打开
theme-dark.css，全文搜索{，除了:root {和媒体查询，不应出现任何其他选择器块
less-loader 中传入 modifyVars 时，为何 theme-light 的颜色没生效
Webpack 构建中通过 less-loader 的 modifyVars 注入主题，但常发现按钮还是蓝色——问题不在 JS 配置，而在 Less 的变量作用域规则。
-
modifyVars是在「编译入口文件开始前」注入的，所以它只影响该入口及其@import链中的变量；如果组件文件在主题变量之前被@import，变量就来不及覆盖 - 正确顺序必须是：
@import "themes/theme-light.less";→@import "components/button.less";→@import "components/card.less"; - 别信「我在 webpack.config.js 里写了 modifyVars 就万事大吉」——它只替换第一层变量，不会递归重写组件文件里硬编码的
#333 - 最稳妥做法：主题文件里只写变量，组件文件里所有颜色/尺寸全部用变量，且禁止在组件内用
!default覆盖（否则modifyVars会被忽略）
真正容易被忽略的点是：主题包不是「配色清单」，而是「变量契约」。它得能被 Ant Design、自研组件、甚至第三方 UI 库同时消费——这就要求变量名语义稳定（比如不用 @btn-primary-bg 而用 @color-primary），路径可预测（统一放在 themes/ 下），且不带任何业务逻辑或媒体查询。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
