👁 67 次阅读

Vite 开发与生产环境组件样式级联顺序为何不同

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

现象描述

在 Vite 8 中使用 vite-plugin-vuetify 并开启 autoImport: true 时，开发模式与生产构建之间出现了 CSS 级联顺序不一致的问题，导致生产环境样式与开发环境渲染结果出现可见偏差。问题报告者给出的典型表现为：图标在生产构建中”看起来更大更粗”（bigger and bolder）。在开发模式下，CSS <style> 标签按模块加载顺序注入： 1. 静态导入的 CSS，例如 import 'material-design-icons-iconfont/dist/material-design-icons.css' 2. 自动导入的组件 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。

背景原因

问题报告者从生产构建输出中提取了证据，表明两个 CSS 块在打包产物中的字节偏移位置被调换：

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 }

两个选择器都是单类名，特异性相同，后出现者获胜。生产环境下 .material-icons 反而排在后面。根据 issue 讨论中的维护者结论，该问题自 Vite 8.0.14 起出现。维护者 sapphi-red 在 2026-06-25 回复：”Ok, I can confirm that it happens since 8.0.14. I made an upstream issue: https://github.com/rolldown/rolldown/issues/9963“，即问题被定位为上游 Rolldown 的行为（详见该上游 issue，编号 9963）。受影响场景并非只有 Vuetify。讨论中 jamesyao54 在 2026-09-28 报告了一种相关表现：重排不仅会反转同特异性规则的源顺序，还可能反转 @layer 优先级。其环境为 Vite 8.3.1、electron-vite 6.0.0-beta.4（Electron 应用中的 React 渲染器）、Tailwind v4 加一套组件库，使用了 @layer theme、@layer base、@layer components。

排查与量化方法

讨论中给出了一条最小复现路径，由 robertsLando 提供：https://github.com/robertsLando/vite8-css-order-repro 。该复现仓库的配置要点：

Vue 3 + Vuetify 3 + vite-plugin-vuetify（autoImport）+ material-design-icons-iconfont
通过 vue-router 配置两个懒加载路由（用于触发 CSS 代码分割）

复现步骤：

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

更早的复现请求来自维护者 sapphi-red：”We need a minimal one to investigate.”；报告者 robertsLando 最初提出的复现仓库是 https://github.com/zwave-js/zwave-js-ui/pull/4591 ，操作方式为：

npm run dev // starts vite in dev-mode
npm run dev:server // starts backend
npm run build // vite build

生产环境访问 http://localhost:8091，开发环境访问 http://localhost:8092。量化定位 CSS 顺序的方式是检查构建产物中两个选择器的字节偏移。上表中的 ~5,587 与 ~340,440 即为报告者在生产 CSS 输出中的实测位置，偏移越靠后的规则在同特异性下优先级更高。

当前处理路径与局限

该 issue 的状态为 open，由维护者在复现后重新开启（reopened），官方尚未合入修复方案。状态结论以剔除噪音后的末条实质评论为准。以下是 issue 讨论中出现过的实际动作与结论，不包含推断。官方侧进展：

维护者 sapphi-red 确认问题自 8.0.14 起出现，并向上游 Rolldown 提交了 issue（https://github.com/rolldown/rolldown/issues/9963）。
维护者在 2026-06-03 对另一名用户（adube）的回复是：”@adube Please open a new issue with a reproduction”，即要求提供新的复现。
正文依据的实质讨论中，未出现官方合并的修复 PR 编号或主干合并记录。

社区侧可用的处理路径与实测反馈：

用户 1Luc1 在 2026-07-16 反馈，将 @robertsLando 示例仓库的依赖升级到最新版本后，该示例仓库的问题似乎消失。其列出的版本变动据 issue 讨论为：@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.（原文此处截断）。
robertsLando 对此回复：”@1Luc1 That’s the same workaround I mentioned in issue”，说明这是一条此前已被提及的变通做法。
AdrienPoupa 在 2026-06-11 反馈，升级到 Vite 8.0.16 后问题仍然存在，并给出链接标签顺序的实际与预期对比。其描述为：Vite 8.0.16 把 index-[hash].css 排在最后，导致其组合规则失效。实际输出：

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

预期输出：

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

merlinz01 在 2026-06-24 反馈，从 Vite 8.0.14 升级到 8.0.16 后再次遇到该问题，并请求重新开启。
1Luc1 的”升级依赖可修复”结论与 AdrienPoupa、merlinz01、robertsLando 的”仍可复现”结论之间存在分歧。据 issue 讨论，前者仅在示例仓库中验证通过，后者包含真实应用场景的复现。

需要明确的是：社区反馈的依赖升级属于应用层变通，不是官方确认的修复。官方侧目前只有上游 issue 链接，没有可核实的合并记录或发布说明确认。

版本与反馈对比表

反馈者	版本/环境	观察结果
sapphi-red（维护者）	自 Vite 8.0.14 起	确认问题存在，提交上游 Rolldown issue 9963
AdrienPoupa	Vite 8.0.16	仍复现，`index-[hash].css` 被排在最后
merlinz01	由 8.0.14 升级到 8.0.16	仍复现
robertsLando	升级到 Vite 8.0.16 后复测	仍复现
1Luc1	vite 8.1.4 等依赖升级组合	在示例仓库中似乎不再复现
jamesyao54	Vite 8.3.1 + electron-vite 6.0.0-beta.4 + Tailwind v4	观察到 `@layer` 优先级被反转

常见错误排查

误判为 Vuetify 独有问题：jamesyao54 的报告显示，相同重排也会出现在 Tailwind v4 的 @layer theme、@layer base、@layer components 场景中，影响范围不限于组件库自动导入。
误以为升级版本即已修复：1Luc1 的修复反馈仅针对示例仓库，而 AdrienPoupa、merlinz01、robertsLando 在 Vite 8.0.16 上均报告仍可复现。据 issue 讨论，两条结论存在分歧，不宜以单一版本号作为判定依据。
误用开发环境结论验证生产：开发模式下 CSS 按模块加载顺序注入，生产环境由 Rolldown 决定打包顺序，两者不能互相替代验证。必须执行 npm run build 与 npm run preview 后观察。
遗漏懒加载路由触发条件：复现配置依赖 vue-router 的两个懒加载路由来触发 CSS 代码分割，缺少该条件可能无法重现打包顺序变化。
把上游 issue 当作已解决：维护者提交的 https://github.com/rolldown/rolldown/issues/9963 是上游跟踪入口，本身不代表修复已合并。

实践建议

在真实应用而非仅示例仓库中验证修复，因为已有反馈表明示例仓库与真实应用的表现不一致。
关注上游 Rolldown issue 9963 的进展，它是当前唯一被维护者明确指向的跟踪渠道。
若应用样式依赖 @layer 优先级或同特异性选择器的源顺序，应把 CSS 顺序纳入构建产物的检查项，而不只依赖开发环境。
复现时应保留最小配置：Vue 3 + Vuetify 3 + vite-plugin-vuetify（autoImport）+ material-design-icons-iconfont + 两个懒加载路由，便于与维护者沟通。
在官方修复落地前，社区侧变通方案（依赖升级组合）的实际效果据 issue 讨论并不稳定，不建议作为唯一依赖。
对生产环境构建产物中的 CSS 链接标签顺序做自检，可参考 AdrienPoupa 给出的实际与预期对照。

FAQ

Q：这个问题只在 Vuetify 中出现吗？ A：不是。据 issue 讨论，jamesyao54 在 Tailwind v4 与 @layer 场景中也观察到了重排现象，且 @layer 优先级被反转比 Vuetify 的情况更严重。 Q：升级到 Vite 8.0.16 能解决问题吗？ A：据 issue 讨论，不能确定。AdrienPoupa、merlinz01、robertsLando 在 Vite 8.0.16 上均报告仍可复现；1Luc1 的报告显示在示例仓库中升级到 vite 8.1.4 等依赖组合后似乎不再复现。两条结论存在分歧。 Q：问题现在是什么状态？ A：issue 状态为 open（reopened），官方侧有维护者提交的上游 Rolldown issue（9963），但正文依据的实质讨论中未出现已合并的修复记录。 Q：开发模式为什么看起来是正常的？ A：开发模式下 CSS <style> 标签按模块加载顺序注入，组件 CSS 在静态导入之后加载，因此在同特异性情况下组件规则胜出。生产环境的打包顺序反转了这一结果。 Q：如何快速自检生产构建是否存在该问题？ A：构建后检查 CSS 链接标签的顺序，或比对关键选择器在产物中的字节偏移。参考报告者的实测数据，VIcon CSS 位于约 5,587 字节处、material-icons CSS 位于约 340,440 字节处即为异常顺序。