SCSS在Vue中的用法

一、安装相关依赖
- 1、安装sass - loader和node - sass（或dart - sass）
二、在组件中使用SCSS
- 1、单文件组件（.vue）中的样式使用
- 2、**全局样式使用SCSS**
- 3、在组件中使用变量和混入（Mixins）等SCSS特性

一、安装相关依赖

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>