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相關(guān)配置
css: {
// css預設(shè)器配置項
loaderOptions: {
sass: {
prependData: `@import "@/assets/scss/_variable.scss";` //引入全局變量
}
}
}
由于sass-loader的版本不同，這里可能會報錯，不同的版本對應(yīng)的關(guān)鍵字不一樣：
sass-loader v8-中，關(guān)鍵字為 “ data ”
sass-loader v8中，關(guān)鍵字為 “ prependData ”
sass-loader v10+中，關(guān)鍵字為 “ 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;
}
經(jīng)過編譯后則會被翻譯成
div {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
參考：
如何在vue項目中引入scss,并使用scss樣式
vue 全局引入公共的scss 和 @mixin 與 @include的使用
vue2/vue3中樣式scss的mixin用法
