为什么我的css代码不能在vuejs中运行？

Question

我在VueJs中遇到过css问题。对不起描述不好，但我不知道我做错了什么。

我的css in style scoped在vuejs中工作得很好，我通常可以解决idis和类。

问题是当我想要更改vuetify框架或wysiwyg编辑器元素的内部css的值时。我不明白，因为在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等。所以我的网站没有任何变化:(我很抱歉不好解释 - css不是我的主要语言。

也许对css有更多经验的人会知道我做错了什么。

Answer 1

单程

在你的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正在为此插件生成DOM，而不是Vue，因此选择器将无法匹配。

生成的CSS看起来像这样：

.ql-editor[v-abc123] {}

但是类ql-editor的元素看起来不像这样，因为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>

Answer 2

发生在我身上的是我没有包含最终的</style>标签，这样的东西可以打破它，所以一定要仔细检查你的vue文件。

Answer 3

确保您不会忘记包含由webpack或类似版本构建的.css文件！