Vue 中的作用域 Bootstrap Css

Question

我正在尝试在 Vue 组件中使用 Bootstrap，并且我希望所有 CSS 都在范围内。我试过这样的事情：

 <style scoped>
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
</style>

但它似乎并不像 css 是范围内的。有什么办法吗？

原文由 vitalii 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<style scoped src="~bootstrap/dist/css/bootstrap.css"></style>

<style scoped src="~bootstrap-vue/dist/bootstrap-vue.css"></style>

---

更新：使用 SCSS 的 hack

第一个解决方案不起作用的原因：

使用 scoped，父组件的样式不会泄漏到子组件中。

如果你希望作用域样式中的选择器是“深”的，即影响子组件，你可以使用 >>> 组合器

来自 Vue doc for scoped CSS

您提到的模态显然不受导入引导程序的组件控制。也许它是一个子组件。也许您正在使用 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 导入您将要使用的内容。

这个解决方案是 hacky。但这是我所知道的唯一适用于您的用例的方法。

原文由 Jacob Goh 发布，翻译遵循 CC BY-SA 3.0 许可协议