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

Question

In my Vue.js component when I set the style to "scoped", the styles are ignored:

<style lang="sass" scoped>

I get the following error in the console:

[HMR] unexpected require(609) to disposed module

It's working as expected if I don't add the "scoped" attribute.

Answer 1

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

Answer 2

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