webentwicklung-frage-antwort-db.com.de

Umfang Bootstrap CSS in Vue

Ich versuche, Bootstrap in einer Vue-Komponente zu verwenden, und ich möchte, dass alle CSS-Bereiche festgelegt werden. Ich habe so etwas ausprobiert:

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

Aber es scheint nicht so, als ob das CSS einen bestimmten Umfang hat. Gibt es eine Möglichkeit, das zu tun?

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

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

Update : Ein Hack mit SCSS

Grund, warum die erste Lösung nicht funktioniert:

Mit dem Geltungsbereich werden die Stile der übergeordneten Komponente nicht in untergeordnete Komponenten übertragen.

Wenn ein Selektor in Stilen mit Gültigkeitsbereichen "tief" sein soll, d. H. Untergeordnete Komponenten betreffen soll, können Sie den Kombinator >>> verwenden

aus dem Vue-Dokument für CSS mit Gültigkeitsbereich

Das von Ihnen erwähnte Modal wird anscheinend nicht von der Komponente gesteuert, in die Sie Bootstrap importiert haben. Vielleicht ist es eine untergeordnete Komponente. Möglicherweise verwenden Sie die jquery-Version von Bootstrap modal. In beiden Fällen werden die Datenattribute nicht zum Modal hinzugefügt.

Um dies zu lösen, benötigen Sie Deep Selector. (Weitere Informationen finden Sie unter https://vue-loader.vuejs.org/en/features/scoped-css.html .)

So würde ich das gesamte Bootstrap-CSS mit SCSS importieren. (Ich denke, es ist unmöglich, dies nur mit reinem CSS zu tun.)

<template>
  <div class="main-wrapper">
    /* ... */
  </div>
</template>

<style scoped lang="scss">
.main-wrapper /deep/ {
  @import "~bootstrap/dist/css/bootstrap.min";
}
</style>

Einige Vorprozessoren, wie z. B. Sass, können >>> möglicherweise nicht richtig analysieren. In diesen Fällen können Sie stattdessen/deep/combinator verwenden. Dies ist ein Alias ​​für >>> und funktioniert genauso.

Das generierte CSS wäre ähnlich wie

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

.. was ist was du willst.

ABER, ich muss sagen, der Import des gesamten Bootstrap-CSS ist eine wirklich schlechte Praxis. Versuchen Sie, nur und genau das zu importieren, was Sie von bootstrap-sass verwenden möchten.

Diese Lösung ist hacky. Aber ich weiß nur so, dass es für Ihren Anwendungsfall funktioniert.

12
Jacob Goh

Beachten Sie beim Lesen der Lösung heute Folgendes:

Das Bereichsattribut ist veraltet und wird entfernt. Benutze es nicht.

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

0
STORMS-MEDIA

ich wollte vuetify in meiner App nur auf einer Seite verwenden, und das hat mein CSS zum Absturz gebracht, dann verwende ich

 <style scoped src="vuetify/dist/vuetify.min.css"></style>

und jetzt funktioniert alles perfekt.


<template>
  <div> .......  </div>
</template>

<style scoped src="vuetify/dist/vuetify.min.css"></style>
<script> ...... </script>