【Vue3】黑马程序员 SpringBoot3+Vue3 大事件项目中 P92 抽屉样式 `:deep() Term expected` 报错的解决方法

这个报错其实不影响运行，但有些有强迫症的同学可能会很难受，以下是解决方法：

报错代码：

:deep() {
    
    
    .avatar {
    
    
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
    
    
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
    
    
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
    
    
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }

改为：

  :deep(.avatar) {
    
    
    width: 178px;
    height: 178px;
    display: block;
  }

  :deep(.el-upload) {
    
    
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  :deep(.el-upload:hover) {
    
    
    border-color: var(--el-color-primary);
  }

  :deep(.el-icon.avatar-uploader-icon) {
    
    
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }

具体原因见：Vue3 样式穿透。