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`样式也会被应用到子组件的元素上。

目录

• 使用scss加上scoped导致样式失效
• 注意事项
• 在vue3 + vite 中使用 :: v-deep 抛出警告
• vue中加样式失效,scoped穿透你需要了解一下
• 1.什么是scoped
• 2.scoped穿透
• 3.另一种方式实现穿透的效果

使用scss加上scoped导致样式失效

在vue3 中给style标签加上scoped 的时候自定义第三方ui框架样式不生效的解决方案

给样式加上 /deep/ >>> 或 ::v-deep

.ant-layout-header {   .ant-menu::v-deep .ant-menu-item-selected {     background-color: #fff;   } }

注意事项

• 在 scss中不支持使用 /deep/ (会报错)
• 在 scss中使用 >>>不生效 (不报错,但是没有用)
• 在scss中可以使用::v-deep

在vue3 + vite 中使用 :: v-deep 抛出警告

:v-deep usage as a combinator has been deprecated. Use :deep() instead.

解决办法 使用 :deep()

  :deep(.ant-menu) {     .ant-menu-item-selected {     }     .ant-menu-item:hover {     }     &.ant-menu-dark {     }   }

深度选择器 Depth selector

vue中加样式失效,scoped穿透你需要了解一下

1.什么是scoped

在Vue文件中的style标签上有一个特殊的属性，scoped。

当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。

如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。

2.scoped穿透

scss的样式穿透,在样式的选择器前加上 /deep/

<style lang="scss" scoped>     /deep/.el-scrollbar__wrap{         overflow-x: hidden;     } </style>

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

<style lang="scss">     .el-scrollbar__wrap{         overflow-x: hidden;     } </style>

直接另写一个<style></style>标签就行了啊,千万不要再加scoped了哈.

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。