在Vue中引入Scope Bootstrap Css

Question

在Vue中引入Scope Bootstrap Css

csstwitter-bootstrapwebpackvue.jsvue-loader

19

我试图在Vue组件中使用Bootstrap，并希望所有CSS都是作用域限定的。我尝试了这样的代码：

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

但似乎CSS没有被隔离。有没有方法可以实现这一点？

- vitalii

5个回答

6

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

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

- Mirza Andriamanamisoa

2

我使用了以上代码，但Bootstrap CSS泄漏到全局，即未被限定。 - LMK

4

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

- Ing Oscar MR

0

对我来说，这是使其正常工作并防止泄漏的解决方案：

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

强制类型转换明显也可以改为scss。

- ill

0

在Vue 3中，::v-deep选择器已经被更改，旧的方法仍然可以使用，但已被弃用（如果您以这种方式导入css/scss，则可能会导致大量弃用消息出现在构建中）。

因此，为了记录，以下是您可以在Vue 3中进行操作的方式：

<template>
    <div class="main-wrapper">
        <div class="bootstrap-scope">
            /* All children that need Bootstrap including slotted content etc */
        </div>
    </div>
    
</template>

<style scoped lang="scss">
    .main-wrapper::v-deep(.bootstrap-scope) {
        @import "~bootstrap";
    }
</style>

您也可以删除 div.main-wrapper 并选择根 div SFC 组件。假设您的组件名称为 my-awesome-component，则选择器应为：

<style scoped lang="scss">
    .my-awesome-component::v-deep(.bootstrap-scope) {
        @import "~bootstrap";
    }
</style>

或者，如果您不想使用生成的类名，也可以选择：

<style scoped lang="scss">
    div:first-child::v-deep(.bootstrap-scope) {
        @import "~bootstrap";
    }
</style>

在实际的shadowDom中，您将使用:host选择器来选择组件的根元素，这将使其更加简洁，但据我所了解(https://github.com/vuejs/vue-loader/issues/1601)，vue-loader团队尚未决定如何处理此问题。 :deep()选择器在官方Vue 3文档中有一个小节：https://v3.vuejs.org/api/sfc-style.html#deep-selectors 还有一个关于深度选择器的VueJS RFCS，其中更详细地描述了为什么它一直在变化：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

- Thomas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jacob Goh · Accepted Answer

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

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

更新: 使用 SCSS 的 hack

为什么第一个解决方案行不通:

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

如果你想在 scoped 中使用类似 "deep" 的选择器，即影响子组件的选择器，可以使用 >>> 组合器。

来自 Vue 文档的 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>

有些预处理器（例如Sass）可能无法正确解析>>>。在这种情况下，您可以使用/deep/选择器代替- 它是>>>的别名，功能完全相同。

生成的CSS将类似于：

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

这正是你想要的。

但是，我必须说，导入整个Bootstrap CSS是一种非常糟糕的做法。尝试仅从bootstrap-sass中导入你需要使用的内容。

这个解决方案有点取巧。但这是我唯一知道的适用于你的用例的方法。