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

Question

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

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

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

删除作用域效果很好。我不知道发生了什么事。任何人都可以提供这个问题的解决方案吗？

编辑：这是工作演示：

代码沙箱

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

Answer 1

更新：在 Vue 3 中，穿透选择器是:deep(). 例如：

\n

.qtable :deep(tbody td) {\n  white-space: normal;\n}\n

\n

...将产生以下内容：

\n

.qtable[data-v-f3f3eg9] tbody td {\n  white-space: normal;\n}\n

\n\n

初步回答：

\n

使用警告：>>>with lang="scss"!

\n

虽然在未指定（或设置为）>>>时似乎按预期工作，但对于 则不然。langcsslang="scss"

\n

唯一可以使用的穿透选择器lang="scss"（在最新的 2.x Vue \xe2\x80\x94 中v2.6.11）是/deep/和::v-deep。\n我确定的是，它与或软件包
无关，因为我尝试了两者并且其行为相同。所以它要么在 Vue 包级别，要么在node-sassdart-sasssass包级别。但我不认为降级其中任何一个是可行的解决方案

\n

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

\n

请注意它曾经有效，我不知道它何时或为何停止工作（我个人总是更喜欢::v-deep，没有特殊原因）。

\n

在你的情况下：只需将所有内容放入::v-deep {}：

\n

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

\n\n

...他们会申请的。

\n

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

\n