Vue3中为何使用scoped SCSS后样式失效？

本文共计607个文字，预计阅读时间需要3分钟。

目录 + 使用SCSS中的scoped导致样式失效 + 注意事项 + 在vue3+vite中使用 ::v-deep 抛出警告 + Vue中样式失效，scoped穿透你需要了解以下内容：

1.什么是scoped

2.scoped穿透

3.实现穿透效果的另一种方式

1. 什么是scoped

scoped属性在Vue中用于确保样式只应用于当前组件，避免样式冲突。

2. scoped穿透当使用scoped属性时，Vue会为组件内的元素添加一个特定的属性（通常是data-v-f3f3eg9等），使得样式只能作用于带有这个属性的元素。但有时我们需要穿透scoped的限制，使样式作用于外部元素。

3. 实现穿透效果的另一种方式使用::v-deep选择器可以穿透scoped限制，使样式作用于外部元素。但请注意，过度使用::v-deep可能会引起性能问题。