要在 Vue 中全局引入 SCSS，首先需要在項目中安裝 SCSS 預(yù)處理器。

npm install node-sass sass-loader -D

在安裝過后，在 Vue 項目的 src 文件夾下存放一個公共樣式文件 style.scss，并在 main.js 中通過 import 引入。

// main.js
import Vue from 'vue'
import App from './App.vue'
import './style.scss'
Vue.config.productionTip = false
new Vue({
render: h =>h(App),
}).$mount('#app')

接下來，需要配置 Vue CLI 在編譯時解析 SCSS 文件為 CSS 文件。找到項目中的 vue.config.js 文件，如果沒有則創(chuàng)建一個，寫入以下代碼：

// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/style.scss";`
}
}
}
}

其中，prependData 表示將 SCSS 公共樣式文件的內(nèi)容插入到每個組件的樣式中，在組件中可以直接使用 SCSS 變量和混合器。

最后，在組件中可以像使用 CSS 樣式一樣使用 SCSS 樣式，不用再次 import。

// App.vue

除了在組件樣式中使用 SCSS 之外，全局樣式中同樣可以使用 SCSS。

// style.scss
$primary-color: #007bff;
body {
background-color: #f5f5f5;
}
.container {
max-width: 1024px;
margin: 0 auto;
}
.btn {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
color: #fff;
background-color: $primary-color;
}

這樣，就可以愉快地在 Vue 項目中使用 SCSS 了。