Vite中Less样式失效主因是构建时CSS注入顺序被打乱：JS导入顺序不等于HTML link顺序，需用absolute path via path.resolve配置additionalData，严格按重置→变量→组件顺序@import，并避免mixins/vars在组件级Less中重复引入。
Less 变量和样式没生效、组件样式被重置覆盖、构建后颜色突然变回默认值——这些问题八成不是写错了，而是注入顺序在 Vite 构建阶段被悄悄打乱了。
为什么 vite.config.js 里按顺序 import CSS 文件不管用
Vite 的 JS 导入顺序 ≠ 最终 HTML 中 <link> 的加载顺序。开发时样式靠 HMR 动态插入，构建时则由 css.extract: true 触发全量合并，所有 Less 文件被统一收集、排序、压缩进一个 style.css。此时真正起作用的是模块依赖图的解析顺序，而不是你在 main.js 里写的 import './a.css'; import './b.css';。
- 检查构建后生成的
index.html，确认<link rel="stylesheet" href="assets/style.xxxx.css">是否只有一个；如果有多个，再看它们的插入顺序是否符合你预期 - 若用了异步组件（
defineAsyncComponent或lazy()），其样式会打进独立 chunk，但浏览器并行加载，无明确优先级声明时，reset.css可能晚于Button.module.less生效 - 不要依赖文件名排序（如
_01-reset.less、_02-vars.less），Less 编译器不识别这种命名约定
additionalData 路径写错就静默失败，@/ 别名完全无效
Less 引擎在 css.preprocessorOptions.less.additionalData 中执行 @import 时，既不解析 @/ 别名，也不支持相对路径（比如 "./src/styles/variables.less"）。写错就跳过，不报错，变量直接 undefined。
- 必须用
path.resolve(__dirname, 'src/styles/variables.less')拼绝对路径；__dirname是vite.config.js所在目录，monorepo 下要确认它指向当前包而非根目录 - 验证是否成功：在
variables.less第一行加@debug "loaded";，启动vite dev，控制台没输出就说明根本没导入 - 别混用
modifyVars和additionalData定义同一个变量——后者优先级更高，modifyVars会被忽略
Less 的 @import 顺序就是最终 CSS 层叠顺序
Less 不是运行时加载，而是编译期文本拼接。@import "reset.less"; @import "variables.less"; @import "button.less"; 这个顺序，决定了最终 CSS 中规则的物理位置，也决定了谁能覆盖谁。
立即学习“前端免费学习笔记（深入）”；
- 所有全局定义（
@mixin、@function、变量）必须集中在一个入口 Less 文件（如src/styles/index.less）中，并严格按「重置 → 变量/混入 → 基础组件 → 布局 → 页面」顺序@import - 组件级 Less 文件（如
Button.module.less）只写样式规则，禁止再@import变量或混入——这些应由入口文件统一提供 - 要用
@import (reference)引入只提供变量和混入、不输出 CSS 的文件，避免重复注入导致样式膨胀
构建后样式不一致，大概率是 modifyVars 没穿透到提取阶段
开发时 modifyVars 生效，构建后失效，常见原因是它只作用于预处理器阶段，而生产环境的 CSS 提取流程可能绕过该环节：
- 放在
public/下的.less文件不会被 Vite 处理，直接复制，modifyVars完全无效 - 如果用了
--mode staging，但.env.staging里没把VITE_ENV映射到modifyVars，Less 中的if(@env = 'staging')就永远为 false - 第三方库（如 antd）的样式若通过
import 'antd/dist/reset.css'引入，它不走 Less 预处理链路，modifyVars对它无效；得改用less-loader或additionalData注入变量后再@import
最易被忽略的一点：Vite 构建时不会自动给异步 chunk 的 CSS 添加 rel="preload" 或 onload 切换 media 的逻辑，这意味着你无法靠配置保证 reset.css 一定比 async-button.css 先应用——得靠入口 index.less 的导入顺序 + 选择器权重双保险。
