vue3中使用 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 {
}
}