vue 全局引入公共的scss

main.js 只能import css文件 scss文件不能直接import，全局引入公共的scss方法：
步骤一：下载node-sass sass-loader

npm i -D [email protected]

npm i [email protected]

步骤二：配置 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）引入到文档中。
一般引入的scss文件如下

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

在各文件中使用方式：此时是不需要在js 中import 可以直接使用

div {
    width: 100px;
    height: 100px;
    @include center;
}

经过编译后则会被翻译成

div {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

参考：
如何在vue项目中引入scss,并使用scss样式
vue 全局引入公共的scss 和 @mixin 与 @include的使用
vue2/vue3中样式scss的mixin用法