SCSS是CSS的一種預處理器，它引入了變量、嵌套規則、Mixin、函數等高級語法，讓我們在編寫CSS時更加方便快捷。但是，當我們在使用Vue進行開發時，如何在Vue中更好的使用SCSS變量呢？下面我將給大家介紹如何在Vue中操作SCSS變量。

首先，在Vue中使用SCSS變量需要安裝sass-loader和node-sass依賴包：

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

安裝完成后，我們需要在webpack配置文件中進行配置，以Vue-cli3為例，我們可以在vue.config.js中添加如下代碼：

module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "~@/style/variables.scss";`,
},
},
},
}

該配置的作用是向vue-loader中的scss預處理器注入全局變量，從而在所有vue文件中都能夠使用到。

接下來，我們需要在項目中創建一個variables.scss文件來存放我們的變量，例如：

$primary-color: #42b883;
$secondary-color: #35495e;

完成這些后，我們就可以在Vue組件中使用這些SCSS變量了。例如，在template中這樣寫：

<template>
<div class="button-container">
<button class="primary-button">我是主按鈕</button>
<button class="secondary-button">我是次按鈕</button>
</div>
</template>

然后在組件的style標簽中如下引用：

<style lang="scss">
.button-container {
display: flex;
justify-content: space-between;
margin: 20px;
.primary-button {
background-color: $primary-color;
border: none;
color: #fff;
padding: 10px 20px;
cursor: pointer;
}
.secondary-button {
background-color: $secondary-color;
border: none;
color: #fff;
padding: 10px 20px;
cursor: pointer;
}
}
</style>

這樣，我們就可以愉快地在Vue項目中使用SCSS變量了！