web-dev-qa-db-fra.com

pourquoi mon code css ne fonctionne pas dans vuejs?

J'ai un problème avec css dans VueJs. Désolé pour une mauvaise description, mais je n'ai aucune idée de ce que je fais mal.

Mon CSS dans un style limité fonctionne généralement bien en vue, je peux normalement m'adresser aux idis et aux classes.

Le problème est quand je veux changer par exemple la valeur du CSS interne d'un élément du framework vuetify, ou l'éditeur wysiwyg. Je ne comprends pas, car sur codepen tout fonctionne bien. Par exemple ici, je règle le remplissage de l'éditeur wysiwig à 0 et cela fonctionne simplement (dans codepen):

modèle:

<div class="container">
  <div id="editor-container">

  </div>
</div>

scénario

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose the most wonderful and amazing epic you could ever imagine!',
  theme: 'snow'  // or 'bubble'
});

style

.ql-editor {
  padding: 0!important;
}

Sur mon SPA vuejs, je colle exactement le même code CSS et cela ne fait rien. Je suis dans le bon composant, adressant le bon élément. Dans ma console, lorsque je fais l'inspection - je vois les propriétés de .q1-editor comme du rembourrage 12px etc. Donc, rien ne change dans mon site Web :( Je suis désolé pour une mauvaise explication - css n'est pas ma langue principale.

Peut-être que quelqu'un qui a plus d'expérience avec css aura une idée de ce que je fais mal.

cssvue.jsquill
9
gileneusz

Aller simple

Utilisez un sélecteur deep dans vos styles scoped: .container >>> .ql-editor.

<style scoped>
  .container >>> .ql-editor {
    ...
  }
</style>

Cela générerait quelque chose comme:

<style>
  .container[v-abc123] .ql-editor {
    ...
  }
</style>

Vous pouvez lire à ce sujet ici: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Une autre façon

N'utilisez pas scope sur votre balise style.

Explication

Lorsque vous utilisez scoped sur des balises de style dans des fichiers .vue, il ajoute un spécificateur d'attribut à chacun de vos sélecteurs CSS. Lorsque Vue génère le code HTML du composant, il ajoute l'attribut au code HTML afin que les sélecteurs correspondent. Étant donné que quill génère le DOM pour ce plugin, pas Vue, le les sélecteurs ne correspondent pas.

Le CSS généré ressemble à ceci:

.ql-editor[v-abc123] {}

mais l'élément avec la classe ql-editor ne pas ressemble à ceci puisque Vue ne l'a pas généré, donc il ne correspondra pas:

<div class="ql-editor" v-abc123></div>

cela ressemble à ceci:

<div class="ql-editor"></div>

Ce que vous pouvez faire est d'avoir plusieurs <style> balises dans votre fichier Vue. De cette façon, vous pouvez conserver les styles étendus qui sont très utiles et n'ajouter que les styles globaux absolument nécessaires.

<style scoped>
   /* Styles for things that are in the DOM visible in your template tag */
</style>

<style>
  /* quill specific selectors (global) */
</style>

J'essaierais de garder les sélecteurs dans le style global aussi uniques que possible afin qu'ils ne fuient pas. Vous pouvez ajouter un parent autour des éditeurs et faire quelque chose comme:

<style>
  .unique-to-this-component .ql-editor {
    ...
  }
</style>
16
Bill Criswell

Assurez-vous de ne pas oublier d'inclure le fichier .css construit par webpack ou similaire!

0
Nicholas Betsworth

Ce qui m'est arrivé, c'est que je n'ai pas inclus la fin </style> tag, quelque chose comme ça peut le casser, alors vérifiez bien votre fichier vue.

0
Armin