Vue.js 2：使用sass/scss时，局部样式无法正常工作

Question

在我的Vue.js组件中，当我将样式设置为“scoped”时，样式会被忽略：

<style lang="sass" scoped>

我在控制台中看到以下错误：

[HMR] unexpected require(609) to disposed module

如果我不添加“scoped”属性，它会按预期工作。

- Duzmac

---

当您停止开发服务器然后再次启动它时会发生什么？ - IVO GELOV

经过进一步调查，它适用于已经存在于DOM中的元素，但对于使用d3动态添加的元素则不起作用。 - Duzmac

当然，它不适用于在Vue之外创建的东西 - 如果你想为这些东西设置样式，你需要使用特殊制作的选择器。 - IVO GELOV

谢谢@IVOGELOV，我以为在组件内创建的任何内容都可以被限定范围。您是否想将您的评论写成答案，以便我可以接受它？ - Duzmac

Answer 1

将我的评论转换为回答。

当您使用作用域样式时，Vue会向组件中的所有标签添加具有唯一值的data属性，然后静默修改您的CSS / SASS选择器以依赖于该data属性。

例如，.list-container:hover变成了.list-container[data-v-21e5b78]:hover

如果您需要一个影响子组件的深度选择器，您可以使用组合器。

<style scoped>
.a >>> .b { /* ... */ }
</style>

将被编译为

.a[data-v-f3f3eg9] .b { /* ... */ }

如果SASS无法解析>>>组合器，可以将其替换为/deep/。

如果您不使用这个组合器，则

<style scoped>
.a > .b { /* ... */ }
</style>

将被编译为

.a > .b[data-v-f3f3eg9] { /* ... */ }

- IVO GELOV

---

谢谢@IVOGELOV。你知道有没有办法获取将要生成的data-v属性（例如：“data-v-f3f3eg9”），以便将其添加到动态创建的元素中吗？ - Duzmac

你需要查看 vue-loader 的源代码才能了解这个属性是如何生成的。我不会亲自去做 - 相反，尝试使用 >>> 组合器构建你的选择器。它并不是 > 的替代品 - 它只是说明左侧的类将针对 data-v 属性。 - IVO GELOV

组合器本身是没问题的，只是在需要与扩展样式（@extend）一起使用时，有些情况下我无法得到预期结果。所以我只好使用特别设计的选择器来代替。

- Duzmac

/deep/ 对于编译的 SCSS / SASS 非常重要。谢谢。 - alf_red

Answer 2

你可以使用::v-deep选择器来针对子组件的作用域样式进行定位。

例子:

<template>
  <main class="content">
    <child-component></child-component>
  </main>
</template>

在这种情况下，如果您想要更改子组件中段落标签<p>的颜色，您可以使用以下方式进行操作：

.content ::v-deep p {
  color: red;
}

- Chase