需求背景

el-card组件的el-card__header行高设置比较高,需要在项目中修改掉,但无论如何修改都不生效。

问题描述

头部样式在scoped下作用无效,可以通过添加/deep/的方式解决,但由于版本或者其他原因,目前未知,添加该方法总是报错。如下代码总是编译不通过。

  .box-card /deep/ .el-card__header {
    padding: 12px 14px;
    font-size: 14px;
  }

报错信息如下:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

  .role-card /deep/ .el-card__header {
          ^
      Expected selector.
    ╷
577 │ .role-card /deep/ .el-card__header{
    │            ^
    ╵

解决方案

经查网上资料,有人建议修改vue-loader和webpack版本,感觉比较复杂,找了一个简单的实现路径:
将/deep/替换为

::v-deep

或者

>>>

都可以实现此需求。
样例代码:

深度选择器的样例代码

Logo

前往低代码交流专区

更多推荐