web-dev-qa-db-fra.com

Portée Bootstrap Css in Vue

J'essaie d'utiliser Bootstrap dans un composant Vue, et je veux que tous les CSS soient limités. J'ai essayé quelque chose comme ceci:

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

Mais il ne semble pas que le CSS soit limité. Y'a-t'il un quelconque moyen d'y arriver?

csstwitter-bootstrapwebpackvue.jsvue-loader
12
vitalii
<style scoped src="~bootstrap/dist/css/bootstrap.css"></style>

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

Mise à jour : un hack utilisant SCSS

Raison pour laquelle la première solution ne fonctionnera pas:

Avec la portée, les styles du composant parent ne fuiront pas dans les composants enfants.

Si vous souhaitez qu'un sélecteur dans les styles étendus soit "profond", c'est-à-dire affectant les composants enfants, vous pouvez utiliser le combinateur >>>

à partir de la Vue doc pour la portée CSS

Le modal que vous avez mentionné n'est apparemment pas contrôlé par le composant où vous avez importé le bootstrap. C'est peut-être un composant enfant. Vous utilisez peut-être la version jquery de Bootstrap modal. De toute façon, les attributs de données ne seront pas ajoutés au modal.

Pour résoudre ce problème, vous avez besoin de Deep Selector. (vous pouvez en savoir plus à ce sujet dans https://vue-loader.vuejs.org/en/features/scoped-css.html )

Voici comment importer tout le Bootstrap CSS en utilisant SCSS. (Je pense qu'il est impossible de le faire en utilisant uniquement du CSS pur.)

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

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

Certains pré-processeurs, tels que Sass, peuvent ne pas être en mesure d'analyser >>> correctement. Dans ces cas, vous pouvez utiliser le combinateur/deep/à la place - c'est un alias pour >>> et fonctionne exactement de la même manière.

Le CSS généré serait similaire à

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

.. c'est ce que vous voulez.

[~ # ~] mais [~ # ~] , je dois dire, en important l'ensemble Bootstrap CSS est un très mauvaise pratique. Essayez d'importer uniquement et exactement ce que vous allez utiliser de bootstrap-sass à la place.

Cette solution est hacky. Mais c'est la seule façon dont je sais que cela peut fonctionner pour votre cas d'utilisation.

20
Jacob Goh

je voulais utiliser vuetify dans mon application uniquement sur une page, et cela a planté mon css, puis j'utilise

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

et maintenant tout fonctionne parfaitement.

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

<style scoped src="vuetify/dist/vuetify.min.css"></style>
<script> ...... </script>
1
Ing Oscar MR

Notez lors de la lecture de la solution aujourd'hui:

L'attribut de portée est obsolète et sera supprimé. Ne l'utilise pas.

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

0
STORMS-MEDIA