位置: IT常识 - 正文
vue3中使用scss加上scoped导致样式失效问题(vue动态修改scss变量)
编辑：rootadmin这篇文章主要介绍了vue3中使用scss加上scoped导致样式失效问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 目录
本文链接地址:https://www.jiuchutong.com/zhishi/313159.html
转载请保留说明！
推荐整理分享vue3中使用scss加上scoped导致样式失效问题(vue动态修改scss变量)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:scss在vue.cli中的安装,vue动态修改scss变量,vue schart,vue全局引入scss文件,vue-cli sass,vue怎么用sass,scss在vue.cli中的安装,vuecli scss,内容如对您有帮助，希望把文章链接给更多的朋友！
使用scss加上scoped导致样式失效注意事项在vue3 + vite 中使用 :: v-deep 抛出警告vue中加样式失效,scoped穿透你需要了解一下1.什么是scoped2.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了哈.
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。
上一篇：织梦模板DEDECMS自定义表单限制同一IP提交次数(织梦模板安装完整教程)