在Web開發中，許多網站都采用了Sass（Syntactically Awesome Style Sheets）這個CSS預處理器進行樣式設計，它可以簡化CSS的編寫、更加靈活、易于維護。Vue.js是一個流行的前端框架，它也與Sass兼容非常好。在本文中，我們將介紹如何在Vue項目中引用Sass文件。

首先，為了使用Sass，我們需要安裝node-sass和sass-loader這兩個依賴項。安裝命令如下：

npm install node-sass sass-loader --save-dev

接下來，在Vue項目的配置文件vue.config.js中進行配置。我們為項目添加sass-loader，將Sass文件打包成CSS文件。完整的配置如下：

module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/assets/scss/variables.scss";`
}
}
}
}

在上面的配置中，我們指定了Sass文件的變量文件路徑。可以根據自己的項目中的具體路徑進行設置。

現在，我們已經將Sass文件打包成了CSS文件。我們還需要在Vue組件中引用這些CSS文件。為此，我們可以使用vue-style-loader。我們可以通過在這個加載器中導入CSS文件來在Vue組件中引用它：

<style lang="scss">
@import "@/assets/scss/main.scss";
</style>

在這個例子中，我們將Sass文件main.scss導入到Vue組件中。

最后，為了實現在Vue應用程序中的全局樣式，我們還可以使用@global SASS指令。該指令內嵌在選擇器內，可以將樣式應用到整個文檔中：

<style lang="scss">
:global {
.btn {
color: #fff;
background-color: #428bca;
border: none;
}
}
</style>

在上面的示例中，我們定義了一個全局的.btn類，將其樣式應用到整個文檔中，而不僅僅是Vue組件。

總結：在Vue應用程序中引用Sass文件可以以更簡單的方式編寫CSS并更好地組織代碼，同時也可以更容易地維護和修改。通過使用上述步驟，我們可以輕松地將Sass文件集成到Vue項目中。祝你使用愉快！