全局引入scss

main.js 只能import css文件 scss文件不能直接import

步骤一：下载node-sass sass-loader

npm i -D sass-loader@8.x
npm i node-sass@4.14.1

步骤二：配置 vue.config.js 文件

// css相关配置
  css: {
    // css预设器配置项
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/_variable.scss";` //引入全局变量   
      }
    }
  }

由于sass-loader的版本不同，这里可能会报错，不同的版本对应的关键字不一样：
sass-loader v8-中，关键字为 “ data ”
sass-loader v8中，关键字为 “ prependData ”
sass-loader v10+中，关键字为 “ additionalData ”

Sass @mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。
如：

@mixin center() {
    display: flex;
    justify-content: center;
    align-items: center;
}

在文件中我们可以这样使用

div {
    width: 100px;
    height: 100px;
    @include center;
}
则会被编译成
div {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}