Vue的scoped样式无法作用于Bootstrap类，因其只匹配带data-v-xxx属性的组件内元素，而Bootstrap的.btn等是全局注入、无该属性；需用:deep()穿透或改用全局样式。
Vue 的 scoped 样式根本不会作用于 Bootstrap 类
你在 <style scoped> 里写 .btn { color: red; }，它压根不会生效——因为 .btn 是 Bootstrap 注入到全局的类，而 scoped 只会匹配当前组件 DOM 节点上带 data-v-xxx 属性的元素。Bootstrap 的按钮节点没有这个属性，所以你的样式规则连“尝试匹配”的机会都没有。
常见错误现象：按钮没变红、.container 宽度没生效、.text-center 对齐失效——不是 Bootstrap 没加载，而是你误以为局部样式能覆盖全局类。
- 想让 Bootstrap 类生效：确保目标元素没被包裹在
shadow DOM或深度隔离环境（如某些 UI 库的弹窗容器） - 想覆盖 Bootstrap：要么去掉
scoped，改用全局样式文件；要么用深度选择器（如 Vue 3 的:deep(.btn)） - 别在
<style scoped>里写通用类名覆盖，这属于逻辑错配，不是 bug
Bootstrap CSS 和 Vue 组件样式加载顺序冲突
CSS 层叠不看“谁更高级”，只看“谁后加载”。如果你在 main.ts 里先 import './style.css'，再 import 'bootstrap/dist/css/bootstrap.min.css'，那 Bootstrap 就会把你的所有基础样式全盖掉——哪怕你写了 .my-btn 这种自定义类，只要和 Bootstrap 的选择器同级且后加载，照样被干掉。
构建工具里容易踩坑的地方：
立即学习“前端免费学习笔记（深入）”；
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- Vite 默认按
import顺序插入<link>，但若用了插件（如vite-plugin-style-import），可能打乱原始顺序 - Webpack 中若用
MiniCssExtractPlugin提取 CSS，import顺序仍决定最终<link>位置，但需确认没有多入口导致 CSS 合并错乱 - 绝对不要在组件内用
<style>标签写覆盖规则——它默认插入<head>最末，天然晚于外部 CSS，权重再高也白搭
按需引入时漏掉 reboot 和 type 导致基础渲染异常
Bootstrap 的 reboot.scss 和 type.scss 不是“可选模块”，它们重置了 html、body、p、h1–h6 等原生标签的默认样式。如果你只引入了 buttons 和 grid，却跳过了这两个，就会出现：按钮字体发虚、段落行高崩塌、列表缩进错位——这些不是作用域问题，而是底层排版体系缺失。
排查方法很简单：打开开发者工具，检查一个普通 <p> 元素的 Computed 面板，看 font-size、line-height、margin 是否来自 Bootstrap 的 reboot 或 type 规则。如果全是浏览器默认值，基本就是漏引了。
- 必须前置导入：
@import "bootstrap/scss/functions";→@import "bootstrap/scss/variables";→@import "bootstrap/scss/mixins";→@import "bootstrap/scss/reboot";→@import "bootstrap/scss/type"; - 删
forms模块前务必测试<input>渲染是否正常，它依赖reboot的边框和 padding 重置 - 千万别用 CDN 的
bootstrap.min.css和本地 Sass 按需编译混着用，体积白减、权重打架、调试抓狂
构建流程中 PurgeCSS / UnoCSS 误删动态类名
像 class="btn btn-${type}" 或 :class="['btn', `btn-${status}`]" 这种写法，PurgeCSS 默认无法识别变量拼接的类名，会直接把 btn-primary、btn-warning 全部干掉。结果就是按钮只剩骨架，没颜色、没圆角、没阴影——你以为是作用域问题，其实是类名根本没进最终 CSS。
验证方式极简单：临时关闭 PurgeCSS（Vite 中设 build.cssMinify: 'light' 或注释掉 purgecss 插件），刷新页面看样式是否立刻恢复。
- Tailwind 用户重点检查
content配置是否包含所有模板路径，例如content: ['./index.html', './src/**/*.{vue,js,ts}'] - UnoCSS 用户确认
extractor是否支持 Vue 模板中的动态绑定语法 - 别依赖“看起来没用就删”，
btn-outline-secondary这种类可能只在某个条件分支里出现，但 PurgeCSS 看不到运行时逻辑
scoped 本身，而是你一边用着全局类，一边又试图用局部样式去干预它——这种设计矛盾比任何配置错误都难 debug。 
