Bootstrap 5 CSS 必须在自定义样式前加载，因层叠顺序优先于权重；Vite 中 import 顺序不保证最终 CSS 顺序，因其按依赖图重排而非代码顺序。
Bootstrap 5 的 CSS 必须在所有自定义样式之前加载，否则同名选择器会被覆盖——这不是权重问题，是层叠顺序铁律。
为什么 import 顺序在 Vite 里不等于最终 CSS 顺序
Vite 默认把所有 CSS 合并进一个 style 标签注入，但注入时机晚于 DOM 解析；更重要的是，它按模块依赖图重排规则位置，而非你写的 import 行序。哪怕你在 main.ts 里先 import 'bootstrap/dist/css/bootstrap.min.css'、再 import './styles/custom.css'，最终生成的 dist/assets/index.xxxx.css 里，Bootstrap 规则仍可能排在后面。
- 打开浏览器 Network 面板，过滤
css，确认bootstrap.*.css和index.*.css是否真的分开加载（如果分开，说明 Bootstrap 被拆进了异步 chunk） - 检查 Elements → Styles 面板，选中一个
.btn元素，看哪条.btn { ... }被划掉；被划掉的那条，就是实际加载更晚的 - 若
custom.css的规则出现在 Bootstrap 规则上方，说明 Vite 的 CSS 提取逻辑已重排顺序——此时仅靠 JSimport顺序已不可靠
强制保证 Bootstrap CSS 在最前的两种可靠方式
绕过构建工具的自动合并逻辑，用 HTML 的 <link> 锚定顺序。Vite 不会动 public/index.html 里的静态链接，它的顺序就是最终顺序。
- 把 Bootstrap CSS 放进
public/目录（如public/css/bootstrap.min.css），然后在public/index.html的中写：<link rel="stylesheet" href="/css/bootstrap.min.css">
- 自定义 CSS 仍走构建流程（
import './styles/custom.css'），它会被打包进index.xxxx.css，并自动插入到该<link>之后 - 别用
base: '/subpath/'配置去“修正”路径——它只影响<script></script>和构建生成的<link>，对public/下的手写<link>无效
如果必须用 import 引入 Bootstrap，怎么避免被重排
关键不是“怎么 import”，而是“让 Vite 把它当全局依赖处理”。默认 import 是模块级，Vite 可能把它和某个组件样式一起提取；要提升为应用级，需确保它不参与任何条件分支或动态逻辑。
立即学习“前端免费学习笔记（深入）”；
- 必须在项目最顶层同步入口（如
src/main.ts或src/index.tsx）第一行就import 'bootstrap/dist/css/bootstrap.min.css'，前面不能有任何if、try、defineAsyncComponent或React.lazy - 删掉所有其他地方对 Bootstrap CSS 的重复
import，包括组件、路由、布局文件——重复引入会导致 Vite 认为它是局部依赖 - 检查
vite.config.ts是否启用了css.preprocessorOptions，尤其是sass.additionalData；若配置了全局变量注入，确保 Bootstrap 的 SCSS 版本（如bootstrap/scss/bootstrap.scss）也受同一上下文影响，否则变量不会生效
容易被忽略的隐式干扰源
即使你控制了 import 和 <link>，仍有三类外部因素会偷偷打乱顺序：
- 某些 UI 库（如
@mantine/core）或主题插件会在运行时动态注入<style></style>标签，且插入位置固定在末尾，天然晚于你的静态<link> - Vue SFC 的
<style scoped></style>或 React 的 CSS Modules 会生成带属性选择器的样式，权重更高，可能覆盖 Bootstrap 的普通类名——这不是顺序问题，是特异性碾压 - Vite 插件（如
vite-plugin-pwa或@vitejs/plugin-react-swc）若配置了injectHtml，可能往插入额外资源，位置不可控
最终验证方式永远是打开 Network 面板看真实加载顺序，再配合 Elements → Styles 看规则是否被划掉——顺序对了，80% 的“样式不生效”就消失了。不要依赖代码里的 import 顺序做判断。
