Vue 中的作用域 Bootstrap Css

新手上路,请多包涵

我正在尝试在 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 许可协议

阅读 686
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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题