主题配色变量需修改源码中的Less/Sass变量（如@primary-color或$primary-color）并重新编译，常见路径包括src/styles/variables.less或src/assets/styles/_variables.scss；切勿直接改node_modules或编译后CSS。
主题配色变量在哪改
主题的全局配色不是靠 css 覆盖，而是改源码里的 @primary-color 这类 less/sass 变量，再重新编译。直接改编译后的 css 会被下次构建覆盖，白忙活。
常见位置：
-
src/styles/variables.less（Ant Design 类主题） -
src/assets/styles/_variables.scss（Vue CLI + Sass 默认） -
node_modules/xxx-theme/src/styles/index.less（第三方主题包，需确认是否支持外部覆盖）
别在 node_modules 里硬改——一更新就丢。优先查主题文档有没有提供 theme 配置项，比如 Ant Design 的 modifyVars 或 Vant 的 theme-variables。
Less 修改后不生效？检查这三步
改完 @primary-color 却还是旧颜色，大概率卡在这几个环节：
- 没重启开发服务器：Webpack 的 less-loader 通常不监听变量文件变更，
npm run serve必须重启 - 变量被多处定义：搜全项目，看有没有第二个
@primary-color在别的.less文件里重复声明，后声明的会覆盖前面的 - 样式被 CSS-in-JS 或 scoped style 覆盖：用浏览器开发者工具点开元素，看最终生效的
color来自哪条规则，是不是被!important或更高优先级选择器压住了
小技巧：临时在变量文件里加个错别字，比如 @primar-color: #ff0000;，如果编译报错，说明路径和加载是对的；不报错，说明根本没被 import 进来。
Sass 用 $primary-color 但编译报错
Sass 和 Less 变量语法不能混用，$primary-color 是 Sass，@primary-color 是 Less。项目里用了 Sass 却写成 @ 开头，或者用了 Less loader 却传入 $ 变量，都会失败。
确认方式：
- 看
package.json里装的是sass还是less - 看 webpack/vite 配置里用的是
sass-loader还是less-loader - 看入口样式文件是以
.scss还是.less结尾
示例：Vite 项目用 Sass，想全局注入变量，得在 vite.config.ts 里配 css.preprocessorOptions.sass.additionalData，而不是往 less 字段里塞。
修改后打包体积变大？小心变量泄露
有些主题把所有组件样式都通过一个 index.less 全量引入，你改了 @primary-color，结果整个主题的 CSS 全被重编译一遍，体积涨了几百 KB。
更轻量的做法：
- 只 import 实际用到的组件样式，比如
@import '~antd/lib/button/style/index.less';，而非@import '~antd/dist/antd.less'; - 用 CSS 变量兜底：把
@primary-color映射到:root { --primary-color: #1890ff; }，后续用color: var(--primary-color)，这样改色不用重编译 - 避免在变量里写复杂表达式，比如
@primary-color: lighten(#1890ff, 10%);—— 某些构建环境不支持函数调用，直接编译失败
真正难的不是改一个变量，而是确保它只影响该影响的地方，且不影响按需加载、热更新、CI 构建这些环节。变量改完，记得跑一遍 E2E，按钮、表单、弹窗的颜色是否都同步变了，别只盯着首页看。
