當(dāng)我們開(kāi)始在Vue項(xiàng)目中使用SCSS，我們需要首先安裝依賴。在Vue CLI 3.0中，我們可以使用以下命令：

npm install -D sass-loader node-sass

這將安裝并引入兩個(gè)包：node-sass和sass-loader。接著我們需要在vue.config.js中配置sass-loader。我們可以這樣寫(xiě)：

module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/scss/main.scss";`
}
}
}
}

上述代碼中，我們告訴sass-loader在每個(gè)sass文件中都引入main.scss。同時(shí)，在main.scss中，我們可以定義全局變量和mixin：

// 定義顏色變量
$primary-color: #007bff;
$secondary-color: #6c757d;
// 定義flexbox mixin
@mixin flex {
display: flex;
justify-content: center;
align-items: center;
}
// 引入normalize.css
@import "~normalize.css/normalize.css";
// 引入重置樣式
@import "./reset.scss";
// 引入其他樣式文件
@import "./components/button.scss";

在Vue組件中使用SCSS非常簡(jiǎn)單，我們只需要在