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进行黑客攻击

第一个解决方案无法运作的原因：

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

如果您希望范围样式中的选择器为＆＃34; deep＆＃34;，即影响   子组件，您可以使用＆gt;＆gt;＆gt;组合子
     来自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）可能无法解析＆gt;＆gt;＆gt; 正常。在这些情况下，您可以使用/ deep / combinator代替 - 它是＆gt;＆gt;＆gt;的别名并且工作原理完全相同。

生成的CSS类似于

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

..这就是你想要的。

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

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

Answer 2

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

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

Answer 3

我只想在页面上的应用程序中使用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>

Answer 4

对我来说，这是让它工作并防止泄漏的解决方案：

<style lang="less" scoped>
    ::v-deep {
        @import (less) "../node_modules/vuetify/dist/vuetify.min.css";
    }
</style>

转换为 less 显然也可以更改为 scss。

Answer 5

今天阅读解决方案时请注意：

不推荐使用scoped属性，将其删除。不要使用它。

-https://www.w3schools.com/tags/att_scoped.asp

Vue中的Scope Bootstrap Css

5 个答案: