一、安装相关依赖

1、安装sass - loader和node - sass（或dart - sass）

• 如果使用Vue CLI创建的项目，可以通过以下命令安装：
• 对于node - sass（基于LibSass，编译速度较快，但可能存在兼容性问题）：

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

• 对于dart - sass（官方Sass实现，兼容性更好）：

npm install sass - loader dart - sass --save - dev

二、在组件中使用SCSS

1、单文件组件（.vue）中的样式使用

• 在Vue的单文件组件中，可以直接在< style>标签中使用SCSS语法。需要给< style>标签添加 lang = “scss” 属性来表明使用的是SCSS。（可以使用嵌套式写法）

<template>
  <div class="my-component">
    <p>这是一个使用SCSS样式的组件</p>
  </div>
</template>
<style lang="scss">
.my-component { 
	  background-color: #f5f5f5; 
	  p{ color: blue; 
	      &:hover { 
	        color: red; 
	        } 
	      } 
	    } 
</style>

2、全局样式使用SCSS

可以创建一个main.scss（名称可自定义）文件来定义全局样式。然后在main.js（或入口文件）中导入这个文件。

• 例如，在main.scss中：

$primary-color: rgb(20, 236, 56);
body {
  font-family: Arial, sans-serif;
  color: $primary-color;
}

• 在main.js中：

import { createApp } from 'vue'
import App from './App.vue'
import './main.scss';

const app = createApp(App)

app.mount('#app')

3、在组件中使用变量和混入（Mixins）等SCSS特性

• 变量使用
• 可以在组件的<style lang = "scss">中定义变量，也可以从外部导入变量文件。
• 例如，创建一个_variables.scss文件：

 $text-color: #444;

• 在组件中导入并使用

<template>
  <div class="my-other-component">
    <p>这个组件使用了外部定义的SCSS变量</p>
  </div> 
</template>

<style lang="scss">
@import './variables';
.my-other-component{ 
  p { 
    color: $text-color; 
    } 
  } 
</style >  

• 混入使用
• 定义一个混入文件，例如_mixins.scss：

@mixin buttonStyle1 {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
  }
  
 @mixin buttonStyle2 {
    background-color: green;
    color: white;
    padding: 12px 22px;
    border-radius: 3px;
  }
  

• 在组件中使用混入：
• 通过点击事件，切换_mixins.scss中不同的样式

<template>
  <button :class="buttonClass" @click="toggleButtonStyle">切换按钮样式</button>
</template>
<script>
export default {
  data() {
    return {
      isStyle1: true
    };
  },
  computed: {
    buttonClass() {
      return this.isStyle1? 'button-style-1' : 'button-style-2';
    }
  },
  methods: {
    toggleButtonStyle() {
      this.isStyle1 =!this.isStyle1;
    }
  }
};
</script>
<style lang="scss">
@import './main.scss';

.button-style-1 { @include buttonStyle1; } 
.button-style-2 { @include buttonStyle2; } 

</style>

通过以上方法，就可以在Vue项目中充分利用SCSS的强大功能来编写样式。