Vite构建时CSS注入顺序被打乱导致样式失效，根本原因是JS导入顺序不等于HTML link顺序，也不等于Less编译期@import顺序；需用path.resolve配置additionalData、严格按重置→变量→组件顺序@import，并避免组件级Less重复引入全局定义。
构建后样式突然失效、本地正常但上线变样、明明写了 @import 却变量 undefined——这些问题大概率不是写错了，而是 Vite 在构建阶段把 CSS 注入顺序打乱了。Vite 的 JS 导入顺序 ≠ 最终 HTML 中 <link> 的加载顺序，更不等于 Less/Sass 编译时的层叠顺序。
为什么 vite.config.js 里按顺序 import CSS 文件没用？
Vite 开发时靠 HMR 动态插入样式，构建时则由 css.extract: true 触发全量合并：所有 CSS/LESS 文件被统一收集、排序、压缩进一个 style.css。此时起作用的是模块依赖图解析顺序，而不是你在 main.js 或 app.js 里写的 import 行序。
- 检查构建后生成的
index.html，确认是否只有一个<link rel="stylesheet" href="assets/style.xxxx.css"> - 如果有多个
<link>，再看它们在<head>中的实际插入顺序是否符合你预期 - 用了异步组件（
defineAsyncComponent或lazy()）时，其样式会打进独立 chunk，浏览器并行加载，无优先级声明时，reset.css可能晚于Button.module.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全局变量或混入——否则编译时可能引入多份，导致变量冲突或冗余
Blade 模板中手动控制 <link> 顺序最可靠
Vite 默认注入 CSS 的行为不可控，尤其在 Laravel 等服务端渲染场景下，@vite 数组顺序只影响同一构建上下文内的注入次序，一旦有插件或动态逻辑介入，顺序就容易偏移。
- 放弃 JS 里
importCSS，改用 Blade 显式<link>：在app.blade.php的<head>中手写 <link rel="stylesheet" href="{{ asset('build/reset.css') }}"><link rel="stylesheet" href="{{ asset('build/app.css') }}">- 路径必须对应
vite build后public/build/下的真实文件名，不能写resources/css/ - 这种方式完全绕过 Vite 的 CSS 合并逻辑，由模板控制顺序，100% 可控
真正麻烦的不是“怎么排顺序”，而是不同机制（JS import、additionalData、@vite 数组、Blade link）各自生效范围不同，且错误时往往静默。最容易被忽略的是：组件级 Less 文件里偷偷 @import 了变量，结果构建时被多次展开，变量值在不同 chunk 间不一致。
