scss样式修改全局样式

今个遇到个问题 定义一个公共的scss文件 例如 variables.scss;

variables.scss的文件

//我们要修改的是表格单行的样式
// table styles
$table-header-gradient-start: #E8DCE9;
$table-header-gradient-end: #F3CDFB;
$table-row-odd: #D0E6FF;
$table-row-even: #FFFFFF;
$table-hover-gradient-start: #E2ABFF;
$table-hover-gradient-end: #448EF7;

// table style mixins
@mixin table-style {
  ::v-deep .el-table {
    // 表头渐变色
    th {
      background: linear-gradient(to bottom, $table-header-gradient-start, $table-header-gradient-end) !important;
      color: #606266;
    }

    // 设置表格行的默认背景色（奇数行）
    .el-table__row {
      background-color: $table-row-odd !important;
      td {
        background-color: transparent !important;
      }
    }

    // 设置偶数行的背景色
    .el-table__row:nth-child(2n) {
      background-color: $table-row-even !important;
      td {
        background-color: transparent !important;
      }
    }

    // 鼠标悬停效果
    .el-table__body tr.el-table__row:hover {
      & > td {
        background: linear-gradient(to bottom, $table-hover-gradient-start, $table-hover-gradient-end) !important;
        color: #ffffff;
      }
    }
  }
}

在 xxxx.vue文件中我们要引入 这个文件

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

@include table-style;
</style>