Vue覆盖Bootstrap样式：::v-deep使用详解

在 Vue 单文件组件中使用 scoped 样式时，无法直接覆盖 BootstrapVue 等第三方组件内部生成的 DOM 元素（如 `.nav-link`），因为其样式被作用域属性隔离；本文详解了官方推荐且 Vue 2/3 兼容的 `::v-deep(.selector)` 深度选择器用法，澄清常见错误写法（如无括号、无前缀或滥用 `!important`），强调精准穿透、避免全局污染与特异性冲突，并延伸至 SCSS 嵌套优化和 SCSS 变量定制等进阶实践——掌握它，让你既能优雅定制 UI，又不破坏组件封装性与项目可维护性。

在 Vue 单文件组件中使用 `scoped` 样式时，需穿透作用域限制才能覆盖 BootstrapVue（如 `` 渲染出的 `.nav-link`）内部子组件样式；`::v-deep(.selector)` 是 Vue 2/3 兼容的深度选择器标准写法，比无括号或旧语法更可靠。

当你在 Vue 组件中使用 BootstrapVue 的 或 等封装组件时，其内部 DOM 结构（例如 ）由子组件动态渲染，并不处于当前组件的样式作用域内。因此，即使你在