👁 81 次阅读

Vite 8 生产构建 CSS 顺序为何被反转？

来源链接：https://github.com/vitejs/vite/issues/21903

现象描述

在 Vite 8 中，使用 vite-plugin-vuetify 并开启 autoImport: true 时，开发模式与生产构建之间的 CSS 层叠顺序出现不一致，导致生产环境出现视觉回归。开发模式下的 <style> 标签按模块加载顺序注入：先是静态导入的 CSS（例如 import 'material-design-icons-iconfont/dist/material-design-icons.css'），随后才是自动导入的组件 CSS（例如 VIcon CSS，在组件首次渲染时延迟加载）。由于组件 CSS 在静态导入之后加载，.v-icon--size-default { font-size: calc(var(--v-icon-size-multiplier) * 1.5em) } 会覆盖 .material-icons { font-size: 24px }（两者特异性相同，后出现的源顺序获胜）。生产构建下，Rolldown 把自动导入的组件 CSS 放到了静态导入 CSS 之前，层叠被反转：.material-icons { font-size: 24px } 反而排在 .v-icon--size-default 之后并获胜，图标因此以固定 24px 渲染，而不是相对的 1.5em，display 也从 inline-flex 变成 inline-block。最终表现是生产构建中的图标比开发模式更大、更粗。 issue 中给出的构建产物证据如下：

VIcon CSS:            byte offset ~5,587   → .v-icon--size-default { font-size: calc(...1.5em) }
material-icons CSS:   byte offset ~340,440 → .material-icons { font-size: 24px }

两个选择器特异性相同（单一 class），后出现者获胜，production 中获胜的是 .material-icons。

背景原因

该问题的触发需要几个条件同时满足：

使用 vite-plugin-vuetify 且配置 autoImport: true，配置形态为 vuetify({ autoImport: { labs: true, directives: true } })
通过 vue-router 使用至少两条懒加载路由，从而触发 CSS 代码分割
静态导入的图标字体 CSS 与自动导入的组件 CSS 存在同特异性、不同源顺序的冲突规则

按照 issue 中维护者的定位，问题自 Vite 8.0.14 起可以被确认复现。sapphi-red 在 2026-06-25 的评论中表示可以确认该问题从 8.0.14 开始出现，并向上游提了 issue：https://github.com/rolldown/rolldown/issues/9963。这说明该行为并非框架层主动设计，而是与打包器（Rolldown）的 CSS chunk 排序相关。值得注意的是，影响不止于同特异性下的源顺序反转。jamesyao54 在 2026-09-28 的评论中给出了一种相关表现：重排不仅会反转同特异性内的源顺序，还可能反转 @layer 优先级，其后果比 Vuetify 场景更严重。该用户的环境为 Vite 8.3.1、electron-vite 6.0.0-beta.4（Electron 应用中的 React 渲染进程）、Tailwind v4 加组件库，并使用 @layer theme、@layer base、@layer components。该评论给出的实测结果是组件间距由 17px 变为 10px、图标尺寸由 11px 变为 0，颜色变量解析同样受影响，六条 e2e 断言捕获了该问题。

排查或量化方法

定位此类问题可按以下路径推进，这些动作均来自 issue 讨论中实际出现过的做法：

在浏览器中打开生产预览页面，对比开发端口与预览端口下同一组件的计算样式。robertsLando 给出的真实应用测试方式为：npm run dev 启动开发模式，npm run dev:server 启动后端，npm run build 执行构建；生产访问 http://localhost:8091，开发访问 http://localhost:8092。
使用最小复现仓库隔离变量。robertsLando 提供了最小复现：https://github.com/robertsLando/vite8-css-order-repro，其配置为 Vue 3 + Vuetify 3 + vite-plugin-vuetify（autoImport）+ material-design-icons-iconfont，并通过 vue-router 使用两条懒加载路由来触发 CSS 代码分割。
检查构建产物中 CSS 的字节偏移或 <link> 标签顺序。AdrienPoupa 在 2026-06-11 的评论中给出的观测方式是查看 index-[hash].css 的发出顺序：

Actual:
<link rel="stylesheet" crossorigin href="/static/src-[hash].css]">
<link rel="stylesheet" crossorigin href="/static/index-[hash].css">

Expected:
<link rel="stylesheet" crossorigin href="/static/index-[hash].css">
<link rel="stylesheet" crossorigin href="/static/src-[hash].css]">

该用户表示 Vite 8.0.16 把 index-[hash].css 发在最后，导致其组合规则被破坏。复现步骤可归纳为：

npm install
npm run dev      # → icons render correctly (port 5173)
npm run build
npm run preview  # → icons are bigger/bolder (port 4173)

完整解决方案（含必要代码）

该 issue 当前状态为 open，关闭原因为 reopened。官方尚未合入稳定修复方案，因此本节内容以 issue 讨论中出现的社区变通方案为主要依据，并注明其局限。复现所需的应用侧配置（来自 issue 的最小复现描述）：

// src/plugins/vuetify.js
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import { aliases, md } from 'vuetify/iconsets/md'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

export default createVuetify({
  icons: { defaultSet: 'md', aliases, sets: { md } },
})

// vite.config.mjs
vuetify({ autoImport: { labs: true, directives: true } })

据 issue 讨论，升级依赖到较新版本对最小复现仓库有效。1Luc1 在 2026-07-16 的评论中给出的依赖更新为：

@vitejs/plugin-vue    ^6.0.5  →   ^6.0.8
esbuild              ^0.27.0  →  ^0.28.1
vite                  8.0.16  →    8.1.4
vite-plugin-vuetify   ^2.1.2  →   ^2.1.3
vue                  ^3.5.13  →   ^3.5.40
vue-router            ^4.5.0  →   ^5.2.0
vuetify               ^3.8.5  →   ^4.1.5

robertsLando 在同一日期回复称，这正是其在 issue 中提到过的同一变通方案。 1Luc1 在同一条评论里给出了另一条同思路变通：在样式表之前显式声明 layer 顺序（思路见 https://github.com/vuetifyjs/cli/pull/22 ）。jamesyao54 也用同样思路解决 @layer 反转问题，在 <head> 中先声明 @layer properties, theme, base, components, utilities;，使其不受样式表加载顺序影响。需要注意，这一结论仅适用于示例仓库；在真实应用中是否同样生效，issue 中未给出统一的确认。社区反馈存在明显分歧：AdrienPoupa 表示在 Vite 8.0.16 上「still unfixed for us」；merlinz01 在 2026-06-24 表示从 vite 8.0.14 升级到 8.0.16 后问题再次出现；robertsLando 在 2026-06-17 请求重新打开该 issue，称更新到 Vite 8.0.16 后问题在 Vuetify/组件 CSS 场景下仍可复现。也就是说，部分用户通过升级依赖绕过，另一部分用户在同一版本上仍能复现，两者并不矛盾——影响面取决于项目使用的路由懒加载结构、CSS 分割形态与 @layer 用法。关于上游进展，sapphi-red 已于 2026-06-25 向上游提交 https://github.com/rolldown/rolldown/issues/9963，但 issue 中未显示该上游问题已被修复或已被 Vite 主仓库合并的记录。任何「代码已进主干」的表述都缺乏 PR 号或合并记录支撑，应通过 GitHub API 查询 PR 状态来核实，不宜直接断言。

参数或对比表格

维度	开发模式（dev）	生产构建（vite build + preview）
CSS 注入/排序方式	`<style>` 按模块加载顺序注入	Rolldown 决定 chunk 输出顺序
VIcon CSS 位置	静态导入之后加载	出现在较早位置（byte offset ~5,587）
material-icons CSS 位置	静态导入先加载	出现在较晚位置（byte offset ~340,440）
`.v-icon--size-default` 是否获胜	是（1.5em 生效）	否（被覆盖）
`.material-icons` 是否获胜	否	是（24px 生效）
图标视觉表现	相对尺寸 1.5em、inline-flex	固定 24px、inline-block，更大更粗
反馈来源	版本	结论
digitalbase（2026-03-19）	升级到 8.0.0 后	确认同样问题出现
AdrienPoupa（2026-06-11）	Vite 8.0.16	仍未修复，`index-[hash].css` 发在最后
merlinz01（2026-06-24）	8.0.14 → 8.0.16	升级后问题再次出现
robertsLando（2026-06-17）	8.0.16	请求重开，Vuetify 场景仍可复现
sapphi-red（2026-06-25）	—	确认自 8.0.14 起出现，已提上游 issue
1Luc1（2026-07-16）	升级到 vite 8.1.4 等	示例仓库问题消失（社区结论）
jamesyao54（2026-09-28）	Vite 8.3.1	报告 `@layer` 优先级反转的相关表现

常见错误排查

只对比图标尺寸、不对比计算样式：问题表现为 .material-icons { font-size: 24px } 与 .v-icon--size-default 的同特异性竞争，直接看视觉效果容易误判为字体未加载，应检查两条规则的先后顺序。
误以为仅由 Vuetify 引起：jamesyao54 的报告显示，Tailwind v4 配合 @layer theme、@layer base、@layer components 时也会出现重排，甚至反转 @layer 优先级。把问题归因到单一插件会漏掉 @layer 相关表现。
依赖单个版本号下结论：AdrienPoupa 与 robertsLando 在 8.0.16 上仍复现，1Luc1 在升级到 8.1.4 后示例仓库消失。以版本号断言「已修复」或「必然复现」都不可靠，需要在自己的路由结构与 CSS 分割形态下实测。
忽略懒加载路由这一触发条件：最小复现要求通过 vue-router 使用两条懒加载路由以触发 CSS 代码分割，单页或非分割结构可能无法复现。
忽略 <link> 标签顺序：直接检查构建后 HTML 中样式表标签的发出顺序，比翻 CSS 源文件更快定位 AdrienPoupa 描述的那类问题。

实践建议

在 CI 或本地预览中，将生产构建产物与开发模式下的关键组件计算样式做一次对比，尤其针对使用图标字体或 @layer 的项目。
避免依赖自动导入的组件 CSS 与静态字体 CSS 之间的隐式顺序，必要时把冲突规则显式提升特异性或收敛到同一层，减少对源顺序的依赖。
关注上游 https://github.com/rolldown/rolldown/issues/9963 的进展，并以 GitHub API 查询 PR 状态来核实修复是否合入，而不是依据升级经验推断。
在 issue 讨论中报告复现时，提供最小仓库、路由结构、依赖版本与 <link> 发出顺序，这比单张截图更有助于定位。
若项目同时使用 @layer，需额外验证各层优先级在生产构建中是否被保持，这一维度在 Vuetify 场景中并不显现。

FAQ

Q：这个 issue 现在是什么状态？ A：状态为 open，关闭原因为 reopened，共 36 条评论（其中 1 条为机器人或无效留言，实质讨论 35 条），最后一条评论日期为 2026-09-28。 Q：问题从哪个版本开始出现？ A：据 issue 讨论，维护者 sapphi-red 在 2026-06-25 确认自 Vite 8.0.14 起出现，并已向上游提交 https://github.com/rolldown/rolldown/issues/9963。digitalbase 在 2026-03-19 报告升级到 8.0.0 后也出现该问题。 Q：升级依赖能不能彻底解决？ A：据 issue 讨论，1Luc1 表示更新至 vite 8.1.4 等版本后，最小复现仓库的问题消失；但 AdrienPoupa、merlinz01、robertsLando 均在 8.0.16 上反馈仍可复现或问题再次出现。两种结论并存，需按自身项目实测判断。 Q：现象只会表现为图标变大吗？ A：不止。jamesyao54 在 Vite 8.3.1 上报告，重排还可能反转 @layer 优先级，影响 Tailwind v4 与组件库的分层样式，其后果比同特异性源顺序反转更严重。 Q：有没有官方修复版本？ A：截至 issue 讨论的最新状态，尚未看到 Vite 主仓库合入修复的记录，官方侧没有给出修复版本。上游 Rolldown 的问题链接为 https://github.com/rolldown/rolldown/issues/9963，可据此跟踪。