Vue.js 2：作用域风格不适用于sass / scss

Question

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

<style lang="sass" scoped>

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

[HMR] unexpected require(609) to disposed module

如果不添加“作用域”属性，它将按预期工作。

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] { /* ... */ }

Answer 2

您可以使用::v-deep组合器来定位子组件的作用域样式。

示例：

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

在这种情况下，如果您想更改子组件中<p>段落的颜色，则可以执行以下操作：

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