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

Converting my comment to an answer.

When you work with scoped style(s) Vue adds data attribute with an unique value to all tags in your component and then silently modifies your CSS/SASS selectors to rely on this data attribute.

For example, .list-container:hover becomes .list-container[data-v-21e5b78]:hover

If you need a deep selector - that is, which affects child components - you can use a combinator

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

which will be compiled into

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

If SASS is unable to parse the >>> combinator you can replace it with /deep/ instead.

If you do not use the combinator then

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

would be compiled into

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

You can use the ::v-deep combinator to target scoped styles of a child component.

Example:

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

In this case, if you wanted to change the color of paragraphs <p> in the child component, you could do what with:

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