VUE Element Admin框架深度选择器/deep/编译报错，导致el-card修改样式失败的解决方案

Posted 2020-12-17 zhangyezi

需求背景

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

或者

>>>

都可以实现此需求。