CODEWITHSUNDEEP
cssvue.jsquill
gileneusz
gileneusz

Reputation: 1485

why my css code is not working in vuejs?

I've got problem with css in VueJs. Sorry for poor description, but I have no idea what I'm doing wrong.

My css in style scoped works generally fine in vuejs, I can normally address idis and classes.

The problem is when I want to change for example value of internal css of an element of vuetify framework, or wysiwyg editor. I don't understand, because on codepen everything works fine. For example here I'm setting padding of wysiwig editor to 0 and it simply works (in codepen):

template:

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

  </div>
</div>

script

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

On my vuejs SPA I'm pasting the exactly the same css code and it does nothing. I'm in the right component, adressing right element. In my console, when I'm doing inspect - I see properties of .q1-editor as padding 12px etc. So nothing is changing in my website :( I'm sorry for poor explanation - css is not my primary language.

Maybe someone who have more experience with css will have an idea what I'm doing wrong.

Upvotes: 20

Views: 44124

Answers (3)

Nicholas Betsworth
Nicholas Betsworth

Reputation: 1803

Make sure you're not forgetting to include the .css file built by webpack or similar!

Upvotes: 1

Armin
Armin

Reputation: 2151

What happened to me was that I did not include the end </style> tag, a thing like that can break it, so make sure you double check your vue file.

Upvotes: 3

Bill Criswell
Bill Criswell

Reputation: 32941

One Way

Use a deep selector in your scoped styles: .container >>> .ql-editor.

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

This would generated something like:

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

You can read about that here: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Another Way

Don't use scope on your style tag.

Explanation

When you use scoped on style tags in .vue files it adds an attribute specifier to each of your CSS selectors. When Vue generates the HTML for the component it adds the attribute to the HTML so the selectors will match up. Since quill is generating the DOM for this plugin, not Vue, the selectors won't match up.

The generated CSS looks something like this:

.ql-editor[v-abc123] {}

but the element with the class ql-editor does not look like this since Vue didn't generate it, so it won't match:

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

it just looks like this:

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

What you can do is have multiple <style> tags in your Vue file. That way you can keep the scoped styles which are very useful and only add absolutely needed global styles as well.

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

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

I'd try to keep the selectors in the global style as unique as possible so it doesn't leak. You can add a parent around the editors and do something like:

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

Upvotes: 40

Related Questions