web-dev-qa-db-ja.com

CSSコードがvuejsで機能しないのはなぜですか？

VueJsのCSSに問題があります。説明が下手で申し訳ありませんが、何が間違っているのかわかりません。

スタイルスコープの私のcssは、vuejsで一般的に正常に動作し、通常はidisとクラスに対処できます。

問題は、たとえば、vuetifyフレームワークの要素の内部cssまたはwysiwygエディターの値を変更する場合です。 codepenではすべてが正常に機能するため、わかりません。たとえば、ここではwysiwigエディターのパディングを0に設定していますが、これは（codepenで）単に機能します。

テンプレート：

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

  </div>
</div>

スクリプト

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

スタイル

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

私のvuejs SPAでは、まったく同じcssコードを貼り付けていますが、何もしません。私は正しい要素に取り組んでいます。私のコンソールでは、検査中に.q1-editorのプロパティがパディング12pxなどとして表示されます。したがって、私のWebサイトでは何も変更されていません。

Cssの経験が豊富な人は、私が間違っていることを知っているかもしれません。

cssvue.jsquill
9
gileneusz

片道

deepスタイルでscopedセレクターを使用します：.container >>> .ql-editor。

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

これにより、次のようなものが生成されます。

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

これについてはこちらで読むことができます： https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

別の方法

scopeタグでstyleを使用しないでください。

説明

.vueファイルのスタイルタグでscopedを使用すると、各CSSセレクターに属性指定子が追加されます。 VueはコンポーネントのHTMLを生成します。セレクターが一致するようにHTMLに属性を追加します。quillはVueではなくこのプラグインのDOMを生成するため、セレクターは一致しません。

生成されたCSSは次のようになります。

.ql-editor[v-abc123] {}

しかし、クラスql-editorを持つ要素はnot Vueが生成しなかったため一致しません。

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

次のようになります。

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

あなたができることは、あなたのVue=ファイルに複数の<style>タグを持つことです。そのようにすると、とても便利なスコープ付きスタイルを維持でき、絶対に必要なグローバルスタイルも追加できます。

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

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

セレクタが漏れないように、セレクタをグローバルスタイルでできるだけ一意に保つようにします。エディターの周りに親を追加して、次のようなことを行うことができます。

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

Webpackなどで作成された.cssファイルを含めることを忘れないでください！

0
Nicholas Betsworth

私に起こったことは、終わりを含めなかったことでした</style>タグ、そのようなものはそれを壊す可能性があるので、vueファイルを再確認してください。

0
Armin