Vue.js 2 : Scoped style not working with sass/scss

Question

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

<style lang="sass" scoped>

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

[HMR] unexpected require(609) to disposed module

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

Answer 1

将我的评论转化为答案。

当你使用 scoped style(s) 时，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] { /* ... */ }