Vue.js 2:范围样式不适用于 sass/scss [英] Vue.js 2: Scoped style not working with sass/scss

问题描述

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

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

如果我不添加scoped"属性，它会按预期工作.

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

推荐答案

将我的评论转换为答案.

Converting my comment to an answer.

当您使用作用域样式时，Vue 会向组件中的所有标签添加具有唯一值的 data 属性，然后静默修改您的 CSS/SASS 选择器以依赖此 data 属性.

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.

例如，.list-container:hover 变成 .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>

将被编译成

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

如果 SASS 无法解析 >>> 组合器，您可以将其替换为 /deep/.

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>

会被编译成

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

这篇关于Vue.js 2:范围样式不适用于 sass/scss的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！