vue的scoped样式无法作用于bootstrap类，因其只匹配带data-v-xxx属性的组件内元素，而bootstrap的.btn等是全局注入、无该属性；需用:deep()穿透或改用全局样式。
Vue 的 scoped 样式根本不会作用于 Bootstrap 类
你在 <style scoped></style> 里写 .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></style>里写通用类名覆盖，这属于逻辑错配，不是 bug
Bootstrap CSS 和 Vue 组件样式加载顺序冲突
CSS 层叠不看“谁更高级”，只看“谁后加载”。如果你在 main.ts 里先 import './style.css'，再 import 'bootstrap/dist/css/bootstrap.min.css'，那 Bootstrap 就会把你的所有基础样式全盖掉——哪怕你写了 .my-btn 这种自定义类，只要和 Bootstrap 的选择器同级且后加载，照样被干掉。
构建工具里容易踩坑的地方：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章