Vue 中的范围引导 Css

Posted 2023-02-22

【中文标题】Vue 中的范围引导 Css

【英文标题】：Scope Bootstrap Css in Vue

【发布时间】：2018-09-14 04:30:56

【问题描述】：

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

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

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

【参考方案1】：

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

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

---

更新：使用 SCSS 的 hack

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

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

如果您希望范围样式中的选择器“深”，即影响 子组件，你可以使用 >>> 组合器

来自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 导入您将要使用的内容。

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

【讨论】：

它完成了这项工作，但在 Bootstrap 的情况下就不行了——动态生成的元素似乎没有属性。我在简单的模态上尝试过，它似乎不起作用。

应该为这个问题添加更多信息和解释。

我正在尝试更新。再给我几分钟@Eka

@import 不能限定范围，它总是全局应用

@LMK 您不需要重命名扩展名，只需在没有扩展名的情况下导入它，就像答案中一样。 @import "~bootstrap/dist/css/bootstrap.min";

【参考方案2】：

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

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

【讨论】：

我用了上面的，bootstrap css 全局泄露了，即没有作用域。

【参考方案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>

【参考方案4】：

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

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

转换成 less 显然也可以改成 scss。

【参考方案5】：

他们在 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