为啥我的 css 代码在 vuejs 中不起作用？

Posted 2023-02-22

【中文标题】为啥我的 css 代码在 vuejs 中不起作用？

【英文标题】：why my css code is not working in vuejs?为什么我的 css 代码在 vuejs 中不起作用？

【发布时间】：2018-08-06 08:36:34

【问题描述】：

我在 VueJs 中遇到 css 问题。抱歉描述不佳，但我不知道我做错了什么。

我的样式范围内的 css 在 vuejs 中通常可以正常工作，我通常可以处理 idis 和类。

问题是当我想更改例如 vuetify 框架或所见即所得编辑器元素的内部 css 值时。我不明白，因为在 codepen 上一切正常。例如，在这里我将所见即所得编辑器的填充设置为 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 有更多经验的人会知道我做错了什么。

【参考方案1】：

一种方式

在scoped 样式中使用deep 选择器：.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

---

另一种方式

不要在style 标签上使用scope。

---

说明

当您在 .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>

【讨论】：

但现在理论上 - 如果我在同一页面或其他组件中有多个 quill 编辑器并且我只想更改其中一些的边距怎么办？如果我不使用 scoped - 那么我将在全局范围内更改它。

你可以在全局样式中像.parent-specific-class .ql-editor 一样做。

在全球范围内喜欢<div id="editor-container" class="foo"></div> 然后.foo .ql-editor（或者可能是.foo.ql-editor，不确定 quill 对元素做了什么），但这应该会让你接近。

我刚刚添加了另一种方法，这可能是首选，我在最初回答问题时完全忘记了。

【参考方案2】：

发生在我身上的事情是我没有包含结束 </style> 标签，这样的事情可能会破坏它，所以一定要仔细检查你的 vue 文件。

【参考方案3】：

确保不要忘记包含由 webpack 或类似工具构建的 .css 文件！