Vue3中scoped SCSS样式失效怎么办？

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

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

1. 什么是scoped

2.scoped穿透

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

1. 什么是scoped

scoped 是一个CSS属性，用于确保样式只应用于当前组件的元素，避免样式污染全局样式。

2. scoped穿透scoped穿透指的是在Vue组件中使用scoped属性时，有时会发现样式影响了其他组件的元素。这是因为scoped属性在编译时会在样式中添加一个独特的属性选择器，如果这个选择器与其他组件的样式冲突，就会导致穿透。

3. 实现穿透效果的另一种方式使用 :deep 语法可以穿透scoped的限制，直接应用于子组件的样式。例如：

scss :deep(.child-class) { color: red; }

这样，即使子组件也使用了scoped属性，`.child-class`样式也会被应用到子组件的元素上。