vue scoped原理
vue scoped生成带hash attitude的html,css使用hash attr的属性选择器保持唯一性。
例如:
<div class="example">hi</div> .example { color: red; }
生成:
<div class="example" data-v-df38f3e>hi</div> .example[data-v-df38f3e] {color: red;}
这个和css module不同,css module是直接生成带hash后缀的class,webpack的css-loader对css module有直接的支持,开启即可
<button class="button--base-daf62 button--normal-abc53">Submit</button>
1. vue scoped的穿透
.a >>> .b {} 或者 .a /deep/ .b {} (/deep/写法可以防止某些编译器不支持>>>)
会生成:
.a[data-v-f3f3eg9] .b { /* ... */ }
2. vue scoped的取舍
vue scoped生成的hash会增大文件体积,而且属性选择器权重较高,覆写样式不方便,谨慎使用。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步