vue3中使用 scss 加上 scoped 导致样式失效解决办法

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 {
    }
  }

深度选择器 Depth selector