bootstrap 5.2 自定义 scss 变量失效主因是构建链路未注入 variables.scss，需通过 vite 的 additionaldata 显式导入；css 类不生效多因加载顺序或 shadow dom 隔离，须调整引入顺序或 adopt stylesheet。
Bootstrap 5.2 自定义 CSS 升级后失效，不是因为你改错了变量，而是构建链路里某个环节“没看到”你的覆盖声明——variables.scss 被跳过、additionalData 配置漏掉、或 @import 顺序颠倒，都会让 $primary、$body-bg 这类变量回归默认值。
为什么 Vite 项目中自定义 SCSS 变量 build 后全丢了
本地 npm run dev 看起来正常，build 后按钮还是默认蓝色，根本原因是 Vite 没把你的 variables.scss 注入到每个 SCSS 编译上下文里。Bootstrap 的 bootstrap.scss 入口在编译时只读了它自己目录下的 variables.scss，压根没加载你写的那个。
-
vite.config.js中必须显式配置css.preprocessorOptions.sass.additionalData，内容为@import "./src/styles/variables.scss"; -
variables.scss文件只能包含变量声明（如$primary: #e74c3c;），不能含@import或样式规则，否则会触发重复注入警告 - 入口文件（如
main.scss）里不要再@import "variables.scss"，否则和additionalData冲突，变量可能被覆盖两次 - 确认已安装
sass：没有它，Vite 会静默回退成纯 CSS 处理，SCSS 根本不编译
为什么 Bootstrap 5.2 的 CSS 类在 React 组件里不生效
常见现象是加了 btn-top-right 类但完全没样式，浏览器开发者工具里也找不到该类的规则。这不是类名写错，而是 CSS 优先级和加载时机问题：Bootstrap 的 CSS 文件被全局提前引入，后续 import 的自定义样式被高权重选择器压制。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 确保自定义 CSS 文件（如
custom.css）在bootstrap.min.css之后 import，例如在main.tsx顶部按顺序写：import 'bootstrap/dist/css/bootstrap.min.css';→import './custom.css'; - 避免用
!important硬顶，它治标不治本，且容易在响应式断点或状态伪类（如.btn:hover）上失效 - 若用 CSS Modules，类名会被哈希化，
btn-top-right不再是全局类，需通过className={styles['btn-top-right']}使用，不能直接写字符串类名
为什么 Shadow DOM 里 Bootstrap 栅格和按钮样式全没了
.row、.col 塌陷，.btn 没圆角没背景，是因为 Shadow DOM 默认隔离样式——外部 link 引入的 Bootstrap CSS 根本不会穿透进去。
- 不要手动复制 CSS 到
<style></style>标签内，维护成本爆炸；也不要写:host .btn却漏掉.btn:focus、.btn-outline-secondary等变体规则 - 正确做法是复用已加载的
CSSStyleSheet实例：const sheet = document.querySelector('link[href*="bootstrap"]').sheet;，然后在组件挂载时执行this.shadowRoot.adoptedStyleSheets = [sheet]; - 注意
.row依赖父容器宽度，而 shadow host 默认是display: inline，需额外加:host { display: block; width: 100%; }
最易被忽略的一点：Bootstrap 5.2 的 bootstrap/scss/bootstrap.scss 是一个聚合入口，它内部按固定顺序 @import 所有模块。如果你在它之后才声明 $primary，那等于对空气赋值——变量必须出现在所有 Bootstrap @import 语句之前，哪怕只差一行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
