范围 css 未与 lang="scss" 一起应用

Question

我正在使用 Quasar 并尝试设置 q-table 第一列的样式：

<style lang="scss" scoped>
td:first-child {
  background-color: #747480 !important;
}
</style>

但是，即使在重新加载/热重新加载/重新启动服务器之后，这也不起作用。

删除作用域工作正常。我不知道发生了什么。任何人都可以为这个问题提供解决方案？

编辑： 这是工作演示：

Codesandbox

只需从样式中删除范围，颜色就会改变。

Answer 1

警告使用：>>> 和 lang="scss"！

虽然>>> 似乎在未指定lang 时（或设置为css）按预期工作，但lang="scss" 并非如此。

与lang="scss"（在最新的 2.x Vue — v2.6.11）一起使用的唯一穿透选择器是 /deep/ 和 ::v-deep。
我可以肯定的是，它与node-sass 或dart-sass 包无关，因为我尝试了两者并且它的行为相同。所以它要么在 Vue 包级别，要么在 sass 包级别。但我不认为降级是可行的解决方案

由于某种原因，>>> 在scss 中使用时会转换为> > >，由于显而易见的原因，该代码块内的任何内容都不再适用。应该发生的是 >>> 应该被删除，并且在该点之后选择器的任何部分都不应再应用范围属性（就像其他 2 个穿孔选择器一样）。

请注意它曾经可以工作，我不知道它何时或为什么停止工作（我个人一直更喜欢::v-deep，没有特别的原因）。

在您的情况下：只需将所有内容包装到::v-deep {}：

<style lang="scss" scoped>
  ::v-deep {
    td:first-child {
      background-color: #747480; /* no need for !important */
    }
    .q-table tbody td {
      white-space: normal;
    }
  }
</style>

...他们会申请的。

在这里查看它的工作原理：https://codesandbox.io/s/cranky-snow-ruf3w?file=/src/pages/Index.vue

Answer 2

在样式范围内使用deep selector

在您的代码中，在您的 q-table 中添加“id”

<q-table
    title="Treats"
    :data="data"
    :columns="columns"
    row-key="name"
    dark
    color="amber"
    id="my-table"
        />

然后将您的作用域样式更改为这样的样式

<style scoped>
  #my-table >>> td:first-child {
    background-color: #1313eb !important;
  }

 .q-table tbody td {
    white-space: normal;
 }
</style>