Vue中的Scope 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的黑客攻击

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

使用作用域时,父组件的样式不会泄漏到子组件中.

如果您希望范围样式中的选择器"深入",即影响子组件,则可以使用>>>组合子

来自Vue doc for scoped CSS

您提到的模态显然不是由导入引导程序的组件控制的.也许这是一个儿童组成部分.也许你正在使用引导模式的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/combinator代替 - 它是>>>的别名,并且工作方式完全相同.

生成的CSS类似于

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

..这就是你想要的.

但是,我要说,导入整个Bootstrap CSS是一个非常糟糕的做法.尝试仅从importstrap-sass导入并准确导入您将要使用的内容.

这个解决方案很糟糕.但这是我所知道的唯一可以用于您的用例的方法.

Answer 2

我知道这是一个老问题，但这个解决方案对我有用

<style lang="scss" scoped>
 ::v-deep {
   @import 'bootstrap/scss/bootstrap.scss';
 }
</style>