Sass中如何正确使用嵌套选择器覆盖第三方组件样式？

Air-子晴提问于 2026-02-24 23:27:18 阅读 22

前端

我在用Sass写一个Vue项目，想覆盖Element Plus的按钮样式，但嵌套写法好像没生效，是不是写法有问题？

我试过这样写，但生成的CSS选择器优先级不够，样式没被应用：

.my-component {
  .el-button {
    background-color: #409eff;
    border-color: #409eff;
    &:hover {
      background-color: #66b1ff;
    }
  }
}

是不是得加 ::v-deep 或者用其他方式？但加了之后Sass语法又报错……

我来解答赞 3 收藏

反馈

2 条解答

Newb.卜楷 Lv1

最简单的办法：在 Vue 单文件组件里用 ::v-deep 包一层，Sass 里用 & 拼接就行，别嵌套太深：

.my-component {

  ::v-deep(&) {

    .el-button {

      background-color: #409eff;

      border-color: #409eff;



      &:hover {

        background-color: #66b1ff;

      }

    }

  }

}

或者更懒一点，直接写全局样式文件里，不套 .my-component，反正你只改 Element Plus 的按钮样式。

2026-02-27 16:21

Mr-姿言 Lv1

你这个问题其实挺典型的，很多刚用 Vue + Sass + 第三方组件库的人容易踩坑。我来一步步解释下为什么你写的样式没生效，以及怎么写才对。

首先，问题出在两个地方：一个是 Vue 的样式作用域机制，一个是 Sass 的嵌套语法和生成的 CSS 优先级。

你写的是这样的：

.my-component {

  .el-button {

    background-color: #409eff;

    border-color: #409eff;

    &:hover {

      background-color: #66b1ff;

    }

  }

}

这段代码本身在纯 Sass 里是合法的，编译后会生成类似这样的 CSS：

.my-component .el-button {

  background-color: #409eff;

  border-color: #409eff;

}

.my-component .el-button:hover {

  background-color: #66b1ff;

}

但问题在于：如果你的