main.js 只能import css文件 scss文件不能直接import，全局引入公共的scss方法：
步骤一：下载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）引入到文档中。
一般引入的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用法
