element ui中使用 mixin.scss文件（单文件使用，多文件使用）

1.首先新建mixin文件
mixin.scss

//滚动条样式
@mixin scrollbar($width, $border-radius) {
  overflow-y: auto;
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    width: $width;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: $border-radius;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #B9BAC9;
  }

  &::-webkit-scrollbar-track {
    box-shadow: unset;
    background: #5E5D6E;
    border-radius: $border-radius;
  }

  @media screen and (min--moz-device-pixel-ratio:0) {
    scrollbar-width: thin;
  }
}
$white: #ffffff;
$white2: rgba(255, 255, 255, 0.2);
$black: #000000;
$greyb6: #B6B6B6;


$modalLight: #2b2a39;
$modalDark: #1b1b2a;

2.单文件使用
在style中先引入该文件

@import url('../assets/css/mixin.scss');

使用

@include scrollbar(5px,7px);

3.全局使用
vue.config.js文件 配置loader

module.exports = {
    //配置全局样式变量
    css: {
        loaderOptions: {
            sass: {
                data: `@import "@/assets/css/mixin.scss";` 
                // 我使用的 sass-loader 7.0.1版本的，参数是data
                // sass-loader 12.0.0版本的参数则是 additionalData
                // sass-loader v8 参数名为 prependData
            }
        }
    }
}

使用
直接在style中使用即可

@include scrollbar(5px,7px);

全局配置记得重启项目生效，因为修改了vue.config.js文件