Vue.js 2：范围样式不适用于 sass/scss

Question

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

<style lang="sass" scoped>

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

[HMR] unexpected require(609) to disposed module

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

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;
}