问题描述
限时送ChatGPT账号..在我的 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屋!
更多推荐
[db:关键词]
发布评论