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

Question

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

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

然而，即使在 reloading/hot reloading/restarting 服务器之后这也不起作用。

删除作用域工作正常。我不知道发生了什么。谁能解决这个问题？

编辑：这是工作演示：

Codesandbox

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

Answer 1

在样式范围

中使用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>

Answer 2

使用警告：>>> 与 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

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

Scoped css not being applied with lang="scss"

css

vue.js

vuejs2

quasar-framework