我正在尝试在 Vue 组件中使用 Bootstrap，并且我希望所有 CSS 都具有范围。我尝试过这样的事情：
<style scoped>
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
</style>
但似乎 css 没有作用域。有什么办法吗？
【问题讨论】：
标签： css twitter-bootstrap webpack vue.js vue-loader
<style scoped src="~bootstrap/dist/css/bootstrap.css"></style>
<style scoped src="~bootstrap-vue/dist/bootstrap-vue.css"></style>
更新：使用 SCSS 的 hack
第一个解决方案不起作用的原因：
使用作用域，父组件的样式不会泄漏到子组件中 组件。
如果您希望范围样式中的选择器“深”，即影响 子组件，你可以使用 >>> 组合器
您提到的模式显然不受您导入引导程序的组件控制。也许它是一个子组件。也许您正在使用 Bootstrap 模态的 jquery 版本。无论哪种方式，数据属性都不会添加到模式中。
为了解决这个问题，你需要 Deep Selector。 （您可以在https://vue-loader.vuejs.org/en/features/scoped-css.html 中详细了解它）
以下是我如何使用 SCSS 导入整个 Bootstrap CSS。 （我认为仅使用纯 CSS 是不可能做到这一点的。）
<template>
<div class="main-wrapper">
/* ... */
</div>
</template>
<style scoped lang="scss">
.main-wrapper /deep/ {
@import "~bootstrap/dist/css/bootstrap.min";
}
</style>
某些预处理器，例如 Sass，可能无法解析 >>> 适当地。在这些情况下，您可以改用 /deep/ 组合器 - 它是 >>> 的别名，工作原理完全相同。
生成的 CSS 类似于
.main-wrapper[data-v-656039f0] .modal {
/* some css... */
}
..这就是你想要的。
但是，我得说，导入整个 Bootstrap CSS 是一种非常糟糕的做法。尝试仅从 bootstrap-sass 导入您将要使用的内容。
这个解决方案很老套。但这是我知道的唯一适用于您的用例的方法。
【讨论】：
@import "~bootstrap/dist/css/bootstrap.min";
我知道这是一个老问题，但这个解决方案对我有用
<style lang="scss" scoped>
::v-deep {
@import 'bootstrap/scss/bootstrap.scss';
}
</style>
【讨论】：
我想在我的应用程序中仅在页面上使用 vuetify，这使我的 css 崩溃，然后我使用
<style scoped src="vuetify/dist/vuetify.min.css"></style>
现在一切正常。
<template>
<div> ....... </div>
</template>
<style scoped src="vuetify/dist/vuetify.min.css"></style>
<script> ...... </script>
【讨论】：
对我来说，这是让它工作并防止泄漏的解决方案：
<style lang="less" scoped>
::v-deep {
@import (less) "../node_modules/vuetify/dist/vuetify.min.css";
}
</style>
转换成 less 显然也可以改成 scss。
【讨论】：
他们在 Vue 3 中更改了 ::v-deep 选择器，旧方法仍然有效，但已弃用（如果您以这种方式导入 css/scss，可能会导致构建中出现大量弃用消息）。
所以为了记录，这就是你在 Vue 3 中的处理方式：
<template>
<div class="main-wrapper">
<div class="bootstrap-scope">
/* All children that need Bootstrap including slotted content etc */
</div>
</div>
</template>
<style scoped lang="scss">
.main-wrapper::v-deep(.bootstrap-scope) {
@import "~bootstrap";
}
</style>
您还可以删除 div.main-wrapper 并选择根 div SFC 组件。假设您的组件名称是 my-awesome-component 选择器将是：
<style scoped lang="scss">
.my-awesome-component::v-deep(.bootstrap-scope) {
@import "~bootstrap";
}
</style>
或者，如果您不想使用生成的类名，您也可以使用：
<style scoped lang="scss">
div:first-child::v-deep(.bootstrap-scope) {
@import "~bootstrap";
}
</style>
在实际的 shadowDom 中，您将使用 :host 选择器来选择组件的根，这将使其更简洁，但据我了解 (https://github.com/vuejs/vue-loader/issues/1601)，vue-loader 团队尚未决定什么与此有关。
:deep() 选择器在官方 Vue 3 文档中有一小部分专门介绍它：https://v3.vuejs.org/api/sfc-style.html#deep-selectors
深度选择器上还有一个 VueJS RFCS，它更详细地描述了它为什么不断变化：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md
【讨论】：