vue3中使用scss加上scoped导致样式失效问题

更新时间：2022年10月10日 09:13:55 作者：tricolor_car

这篇文章主要介绍了vue3中使用scss加上scoped导致样式失效问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

使用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了哈.

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue之将echart封装为组件
这篇文章主要介绍了vue之将echart封装为组件，本文将会以雷达图为案例，一步步讲解在vue项目中如何使用echart，如何将其封装为能重复调用的组件
2018-06-06
vue2 webpack proxy与nginx配置方式
这篇文章主要介绍了vue2 webpack proxy与nginx配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue实现购物车的全选、单选、显示商品价格代码实例
这篇文章主要介绍了Vue实现购物车的全选、单选、显示商品价格实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue动态生成表格的行和列
这篇文章主要为大家详细介绍了Vue动态生成表格的行和列，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
vue+axios 前端实现登录拦截的两种方式（路由拦截、http拦截）
本文通过实例代码给大家介绍了vue+axios 前端实现登录拦截的方法，主要通过路由拦截和http拦截，具体实例代码大家跟随小编一起通过本文学习吧
2018-10-10
vue-element-admin按钮级权限管控的实现
开发离不开权限,不同的用户登录,根据不同的权限,可以访问不同的管理目录，本文主要介绍了vue-element-admin按钮级权限管控的实现，具有一定的参考价值，感兴趣的可以了解一下
2022-04-04
Vite图片资源打包优化的实现
本文主要介绍了Vite图片资源打包优化的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
详解Vue3中响应式的特殊处理
这篇文章主要为大家详细介绍了Vue3中响应式的一些特殊处理，文中的示例代码讲解详细，对我们深入了解Vue3有一定的帮助，需要的可以参考一下
2023-04-04
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
这篇文章主要介绍了vue-video-player,通过自定义按钮组件实现全屏切换效果,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
vue如何通过button的disabled控制按钮能否被使用
这篇文章主要介绍了vue如何通过button的disabled控制按钮能否被使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04