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

【问题标题】：Vue.js 2: Scoped style not working with sass/scssVue.js 2：范围样式不适用于 sass/scss
【发布时间】：2018-12-30 10:37:53
【问题描述】：

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

<style lang="sass" scoped>

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

[HMR] unexpected require(609) to disposed module

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

【问题讨论】：

【解决方案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] { /* ... */ }

【讨论】：

谢谢@IVOGELOV。您是否有机会知道是否有办法获取将生成的 data-v 属性（例如：“data-v-f3f3eg9”），以便将其添加到动态创建的元素中？
您必须查看vue-loader 的源代码才能了解该属性是如何生成的。我自己不会这样做 - 相反，尝试使用 >>> 组合器构建您的选择器。它不能替代 > - 它只是说明左侧的类将针对 data-v 属性。
>>> 组合器工作正常，只是在某些情况下我需要将它与扩展样式结合使用（@extend）我没有得到预期的结果。我只是使用了特制的选择器。
谢谢。 /deep/ 对于编译后的 SCSS / SASS 非常重要。

【解决方案2】：

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

例子：

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

在这种情况下，如果你想改变子组件中段落<p> 的颜色，你可以这样做：

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

【讨论】：