less变量在生产环境失效的主因是构建流程未正确编译或变量覆盖顺序错误：需确保less-loader启用且javascriptenabled: true，variables.less在引用前@import，modifyvars按环境配置，避免css-in-js覆盖及缓存干扰。
Less变量在生产环境未编译或编译顺序错误
Less变量（如@primary-color）在生产环境失效，最常见的原因是构建流程中Less文件未被正确编译，或变量定义被覆盖。Webpack/Vite等工具若未启用Less loader，或配置了lessOptions但遗漏javascriptEnabled: true（影响@import和变量作用域），就会导致变量残留为原始语法，浏览器直接忽略。
- 检查构建产物中是否还存在
@variable字样——若有，说明Less未编译 - 确认
less-loader版本与Webpack兼容（如Webpack 5需less-loader@8+） - 变量定义文件（如
variables.less）必须在所有引用它的文件之前@import，否则后续文件看不到该变量
开发与生产环境使用了不同Less入口或主题文件
很多项目用theme.less统一管理变量，并通过构建参数切换主题。但若npm run build时未传入对应环境变量（如THEME=prod），或Webpack配置里硬编码了dev.less作为入口，就会导致生产包加载的是开发变量值。
- 检查
package.json中build脚本是否含环境标识，例如"build": "THEME=prod vite build" - 查看构建配置中Less相关
additionalData或modifyVars是否区分环境，比如Vite中：css: { preprocessorOptions: { less: { modifyVars: { '@primary-color': process.env.THEME === 'prod' ? '#1890ff' : '#52c418' } } } } - 确认
import路径没写死，例如@import './themes/dev.less';应改为动态路径或由构建插件注入
变量被CSS-in-JS或运行时样式覆盖
Less编译出的CSS是静态的，但如果项目同时用了Styled Components、Emotion或Ant Design的ConfigProvider，它们可能在运行时注入更高优先级的CSS规则，覆盖Less生成的值。尤其ConfigProvider.theme会重写Ant Design所有组件的@primary-color等变量，且优先级高于普通CSS。
- 打开开发者工具，检查目标元素的
color或background属性，看是来自style attribute、inline style还是.css文件 - 搜索页面源码中是否有
ConfigProvider theme=或injectGlobal调用，它们可能动态改写了Less变量效果 - Ant Design v5+默认启用CSS-in-JS，若想完全用Less控制，需显式关闭：
theme={{ cssVar: false, components: {} }}
缓存导致旧CSS文件未更新
Less变量值“看起来不正确”，有时只是浏览器或CDN缓存了旧的main.css，而新构建产物已含正确值。特别是当变量值仅变了一个字符（如#1890ff → #007bff），文件名哈希可能不变，导致强缓存生效。
- 在Network面板中查看CSS文件响应头，确认
Cache-Control是否为no-cache或含max-age=0 - 对比本地构建产物与线上文件内容：用
curl https://yourdomain.com/assets/main.xxxx.css | grep primary-color - 强制刷新时按
Cmd+Shift+R（macOS）或Ctrl+F5（Windows），绕过内存缓存
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
