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 v-for 遍历循环时key值报错的问题
今天小编就为大家分享一篇解决vue v-for 遍历循环时key值报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue data变量相互赋值后被实时同步的解决步骤
这篇文章主要介绍了vue data变量相互赋值后被实时同步的解决步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
在Vue中获取自定义属性方法:data-id的实例
这篇文章主要介绍了在Vue中获取自定义属性方法:data-id的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue/cli3.0脚手架部署到nginx时页面空白的问题及解决
这篇文章主要介绍了vue/cli3.0脚手架部署到nginx时页面空白的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue中动态Class实战示例
这篇文章主要为大家介绍了Vue中动态Class的实战示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
Vue Echarts实现可视化世界地图代码实例
这篇文章主要介绍了Vue Echarts实现可视化世界地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue3通过父子传值实现弹框功能
在Vue3中,我们可以通过 provide 和 inject 来实现父子组件之间的数据传递,这也适用于实现弹框功能,下面我们就来学习一下vue3实现弹框功能的具体方法吧
2023-12-12
vue的基本用法与常见指令
Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。接下来通过本文给大家介绍vue的基本用法与常见指令，感兴趣的朋友一起看看吧
2017-08-08
Vue组件库Element-常见组件表格示例代码
对于Element组件的使用,最主要的就是明确自己想要达到的效果,从官网中将对应代码复制粘贴即可,最重要的是要读懂不同组件官网中提供的文档,以便实现自己想要的效果,本文给大家介绍Vue组件库Element-常见组件表格,感兴趣的朋友一起看看吧
2023-10-10
一文带你搞懂Vue中Vuex的使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。本文会通过一些简单的示例，为大家详细讲解Vuex的使用，感兴趣的小伙伴可以跟随小编一起学习一下
2022-11-11