css - Vue 中的作用域 Bootstrap Css

Question

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

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

但看起来 css 似乎没有作用域。有什么办法吗？

Answer 1

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

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

---

更新:使用 SCSS 的 hack

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

With scoped, the parent component's styles will not leak into child components.

If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator

from the Vue doc for scoped CSS

您提到的模式显然不受您导入 Bootstrap 的组件的控制。也许它是一个子组件。也许您正在使用 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>

Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same.

生成的 CSS 类似于

.main-wrapper[data-v-656039f0] .modal {
    /* some css... */
}

..这就是你想要的。

但是，我得说，导入整个 Bootstrap CSS 是一个非常糟糕的做法。尝试仅从 bootstrap-sass 导入您将要使用的内容相反。

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