根本原因是生产环境css提取、变量注入时机与样式加载顺序三者叠加导致less编译结果与运行时css不匹配：css.extract:true强制全量提取破坏按需编译链路，modifyvars未穿透所有构建阶段，异步组件样式加载顺序失控，第三方库主题变量覆盖失效。
根本原因不是 Vite 本身出错，而是生产环境的 CSS 提取行为、变量注入时机、样式加载顺序三者叠加导致 Less 编译结果与运行时实际应用的 CSS 不匹配。
css.extract: true 强制提取会破坏 Less 的按需编译链路
Vite 默认开发环境内联 CSS（JS 中 injectStyle），生产环境开启 css.extract: true 后，所有 Less 文件被统一收集、合并、压缩为独立 .css 文件。这带来两个隐性问题：
- 原本按模块依赖触发的 Less 编译（如只编译
Button.vue中的<style lang="less"></style>）变成全量扫描，@import关系可能被提前解析或重复解析 - Less 中通过
modifyVars注入的环境变量（如@env: 'production'）在提取阶段被固化一次，但若多个入口或异步 chunk 共享同一变量定义，可能因注入时机不一致导致分支逻辑错位 - PostCSS 插件（如
postcss-prefixwrap或autoprefixer）在提取前后执行阶段不同，开发环境走 HMR 管道，生产环境走构建管道，规则应用顺序可能偏移
Less 变量注入未穿透到所有构建阶段
Vite 的 css.preprocessorOptions.less.modifyVars 只影响预处理器阶段，但生产环境的 CSS 提取流程中，部分样式可能绕过该阶段：
- 放在
public/下的.less文件不会被 Vite 处理，直接复制——它压根不走modifyVars - 通过
additionalData注入的全局变量（如@import "vars.less";）若路径错误或内容含语法错误，开发环境报错明显，但生产环境可能静默跳过，导致变量 fallback 为默认值 -
vite build时若用了--mode staging，而.env.staging里没透传VITE_ENV到modifyVars，Less 里if(@env = 'staging')就永远为 false
动态 import 的组件样式加载顺序失控
Vue/React 中用 defineAsyncComponent 或 lazy() 加载的组件，其 <style lang="less"></style> 在生产环境会被打到异步 chunk 对应的 CSS 文件中，但 HTML 中的 <link> 标签插入顺序无法保证早于主 CSS：
- 浏览器并行加载多个
.css文件，无明确优先级声明时，渲染引擎按网络响应先后应用样式 - 若主包 CSS 包含重置规则（如
* { box-sizing: border-box; }），而异步组件样式依赖它，但异步 CSS 先加载完成，就会短暂出现布局错乱 - Vite 不会自动给异步 chunk 的 CSS 添加
rel="preload"或media="print" onload="this.media='all'"这类控制手段
第三方库 Less 主题未同步更新
像 antd 4.x、arco-design 这类依赖 Less 主题的 UI 库，其变量覆盖逻辑极易在生产构建中失效：
- 你写了
modifyVars: { '@primary-color': '#1890ff' }，但 antd 的default.less里有@primary-color: #1890ff;—— Less 编译器按字面量覆盖，而非运行时变量继承，若 antd 版本升级后变量名变更（如改为@color-primary），你的覆盖就无效 - UI 库的
index.less若用了@import (multiple) "xxx"，Vite 的 Less 插件可能不支持该语法，开发环境能跑，生产构建时报错并跳过整个导入链 - 使用
less-plugin-autoprefix等插件时，开发环境通过vite-plugin-less注册，但生产构建若没显式传入plugins数组，插件就不起作用
最易被忽略的一点：Vite 生产构建会把所有 .less 文件的 @import 依赖图扁平化处理，但若某个变量文件被两个不相交的模块树分别 @import，它可能被编译两次——一次带 modifyVars，一次不带，最终 CSS 里出现冲突声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
