根本原因是构建工具将CSS打包合并并按依赖重排顺序，导致浏览器实际加载顺序与开发时预期不符；必须通过HTML中手动写标签强制Bootstrap在前、自定义CSS在后，或使用?inline方式内联注入，才能确保层叠顺序。
自定义 CSS 在打包后失效，不是因为写错了，而是构建工具打乱了你原本依赖的加载顺序或选择器权重逻辑——浏览器最终看到的 CSS 已不是你开发时写的那套。
为什么 build 后自定义样式突然被覆盖？
本地 npm run serve 看起来正常，build 后按钮颜色、.navbar-brand 字体全回退，默认值接管。根本原因是：Vite/Webpack 把所有 CSS 打包进一个 index.css，并按模块依赖图重排顺序，不再保证“Bootstrap 先、你的 CSS 后”。哪怕你在 JS 里写了 import 'bootstrap/dist/css/bootstrap.min.css'; import './styles/custom.css';，最终生成的 <link> 顺序也可能颠倒。
- 打开浏览器「查看页面源代码」，搜
bootstrap和custom对应的<link href="</code">，确认实际顺序 - Vite 用户检查是否启用了
css.preprocessorOptions，它可能让 SCSS 编译时机错乱，间接影响注入位置 - Webpack 用户注意 MiniCssExtractPlugin 的 loader 链是否完整经过
sass-loader，漏掉就等于没编译变量
如何强制自定义 CSS 在 Bootstrap 之后生效？
别赌构建工具的顺序，用明确的层叠控制手段：
- 在 HTML 模板中手动写
<link>，把 Bootstrap CDN 或本地 CSS 放最前，自定义 CSS 紧跟其后 —— 这是唯一浏览器无法绕过的顺序保障 - 如果必须用 JS
import，改用import 'bootstrap/dist/css/bootstrap.min.css';+import './styles/custom.css?inline';（Vite），让后者以内联<style></style>插入末尾 - 避免在组件内
<style></style>或scoped中覆盖全局类；Vue 用:deep(.btn)，React 用createGlobalStyle显式声明作用域
为什么加 !important 有时也不管用？
因为 !important 仅解决同层级规则冲突，但挡不住三类更硬的覆盖：
- Bootstrap 组件内部的内联样式（如
style="color: var(--bs-primary);"），权重为 1000，高于任何类+!important - 用户浏览器插件（如 Dark Reader）注入的高权重样式，直接劫持渲染链
- Shadow DOM 或 CSS-in-JS 作用域隔离 —— 你的
!important根本进不去那个封闭环境
真正卡住人的，从来不是“怎么加权重”，而是“加完权重后，那条规则到底有没有被浏览器读到”。每次怀疑失效，先看 Elements 面板 Styles 栏里它是否出现；不出现，说明路径、语法或作用域拦住了它 —— 不是优先级问题，是根本没入场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
