warum mein css code funktioniert nicht im vuejs?

Ich habe Probleme mit css in VueJs. Sorry für die schlechte Beschreibung, aber ich habe keine Ahnung was ich falsch mache.

Mein css in style scoped funktioniert in der Regel Prima in vuejs, kann ich normal die Adresse idis und Klassen.

Das problem ist, wenn ich ändern möchten, zum Beispiel mit dem Wert der internen css eines Elements vuetify Rahmen, oder wysiwyg-editor. Ich verstehe nicht, weil auf codepen funktioniert alles einwandfrei. Zum Beispiel hier, ich werde Polsterung der wysiwig-editor auf 0 und es funktioniert einfach (im codepen):

Vorlage:

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

  </div>
</div>

Skript

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'
});

Stil

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

Auf meine vuejs SPA ich bin das einfügen der genau die gleichen css-code und es tut sich nix. Ich bin in der rechten Komponente auf richtigen element. In meine Konsole, wenn ich dabei bin inspizieren - ich sehe Eigenschaften .q1-editor als Polsterung 12px etc. Also nix verändert in meiner website 🙁
Tut mir Leid für die schlechte Erklärung - css ist nicht meine primäre Sprache.

Vielleicht jemand, der mehr Erfahrung mit css haben Sie eine Idee, was ich falsch mache.

InformationsquelleAutor gileneusz | 2018-02-26

18

Eine Möglichkeit

Verwenden deep Selektor in der scoped Stile: .container >>> .ql-editor.
```
<style scoped>
  .container >>> .ql-editor {
    ...
  }
</style>
```
Wäre dies erzeugt so etwas wie:
```
<style>
  .container[v-abc123] .ql-editor {
    ...
  }
</style>
```
Du kannst mehr darüber hier Lesen: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Anderen Weg

Nicht verwenden scope auf Ihre style tag.

Erklärung

Wenn Sie scoped auf style-tags in .vue-Dateien, die es fügt ein Attribut-Bezeichner, um jeder deiner CSS-Selektoren. Wenn Vue erzeugt den HTML-Code für die Komponente fügt er das Attribut auf HTML, so dass die Auswahlen übereinstimmen. Da quill wird die Erzeugung des DOM für dieses plugin nicht, Vue, die Auswahlen nicht übereinstimmen.

Die generierte CSS sieht wie folgt aus:
```
.ql-editor[v-abc123] {}
```
aber das element mit der Klasse ql-editor hat nicht so Aussehen, da Vue hat nicht generiert, so dass es nicht übereinstimmt:
```
<div class="ql-editor" v-abc123></div>
```
sieht es nur so:
```
<div class="ql-editor"></div>
```
Was Sie tun können, ist, mehrere <style> - tags in Ihre Vue-Datei. Diese Weise können Sie halten die scoped styles, die sehr nützlich sind und nur über die unbedingt nötig ist, Globale Stile als gut.
```
<style scoped>
   /* Styles for things that are in the DOM visible in your template tag */
</style>

<style>
  /* quill specific selectors (global) */
</style>
```
Ich würde versuchen, halten Sie die Selektoren im globalen Stil so einzigartig wie möglich, damit Sie nicht Auslaufen. Sie können hinzufügen, ein Elternteil rund um die Redaktion und tun Sie etwas wie:
```
<style>
  .unique-to-this-component .ql-editor {
    ...
  }
</style>
```
- wow, das ist die richtige Antwort! ohne Rahmen ist es dann endlich funktioniert. Ich habe keine Ahnung warum, aber endlich habe ich den Grund
- Ich habe gerade aufgeräumt ein bisschen auf, warum das geschieht.
- dies ist gold, ich danke Ihnen so sehr! Ich verbringe viele Stunden mit dem Versuch zu finden, was Los ist
- Überhaupt kein problem!
- aber jetzt rein theoretisch - was ist, wenn ich habe mehrere Feder-Redakteure auf der gleichen Seite oder in anderen Komponenten und ich möchte das ändern-Marge in nur einige von Ihnen? Wenn ich nicht verwenden, scoped - dann werde ich es ändern weltweit.
- Das können Sie gerne tun .parent-specific-class .ql-editor {} im globalen Stil.
- Ich werde es versuchen! Danke!
- Mag <div id="editor-container" class="foo"></div> dann .foo .ql-editor im globalen (oder vielleicht .foo.ql-editor, nicht sicher, was Feder hat, mit der element -) aber das sollte Euch in der Nähe.
- Sind Sie richtig! es funktioniert so wie es soll mit diesen Klassen
- Die schnelle Antwort ist schnell! Danke.
- Sie verdienen ein großes Dankeschön :wie
- Ich habe gerade einen anderen Ansatz, das ist wahrscheinlich am günstigsten, dass ich völlig vergaß bei der Beantwortung der Frage zunächst.
InformationsquelleAutor Bill Criswell
0

Was mir passiert ist war, dass ich nicht auch das Ende </style> tag, eine Sache wie die, die Sie brechen kann, so stellen Sie sicher, überprüfen Sie Ihre vue-Datei.

InformationsquelleAutor Armin
0

Stellen Sie sicher, dass Sie nicht vergessen, gehören die .css-Datei gebaut von webpack oder ähnliches!

InformationsquelleAutor Nicholas Betsworth

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.