面试题：如何在 Vue 项目中引入 SCSS？引入后如何使用？

在 Vue 项目中引入和使用 SCSS 非常简单。SCSS 是 CSS 的预处理器，提供了变量、嵌套、混合（Mixins）、函数等高级功能，能够提升 CSS 的可维护性和开发效率。以下是详细的步骤和用法：

1. 安装 SCSS 依赖

在 Vue 项目中，首先需要安装 sass 和 sass-loader 依赖：

npm install sass sass-loader --save-dev

或者使用 Yarn：

yarn add sass sass-loader --dev

2. 在 Vue 组件中使用 SCSS

在 Vue 单文件组件（.vue 文件）中，可以通过 <style> 标签的 lang 属性指定使用 SCSS：

<template>
  <div class="example">
    <p>Hello, SCSS!</p>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
};
</script>

<style lang="scss" scoped>
.example {
  p {
    color: red;
    font-size: 20px;

    &:hover {
      color: blue;
    }
  }
}
</style>

lang="scss"：指定使用 SCSS 语法。
scoped：将样式限定在当前组件内，避免全局污染。

3. 全局引入 SCSS 文件

如果需要在多个组件中共享 SCSS 变量、混合或全局样式，可以将 SCSS 文件全局引入。

方法 1：在 `main.js` 中引入

在 main.js 中直接引入全局 SCSS 文件：

import Vue from 'vue';
import App from './App.vue';
import './assets/styles/global.scss'; // 引入全局 SCSS 文件

new Vue({
  render: h => h(App),
}).$mount('#app');

方法 2：在 `vue.config.js` 中配置

通过 vue.config.js 配置全局 SCSS 文件：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/assets/styles/variables.scss";`, // 全局引入 SCSS 文件
      },
    },
  },
};

@import：引入 SCSS 文件。
@/：是 Vue CLI 中 src 目录的别名。

4. 使用 SCSS 特性

在 SCSS 文件中，可以使用以下特性：

变量

定义变量并在样式中使用：

$primary-color: #42b983;
$font-size: 16px;

.example {
  color: $primary-color;
  font-size: $font-size;
}

嵌套

嵌套选择器：

.example {
  p {
    color: red;

    &:hover {
      color: blue;
    }
  }
}

混合（Mixins）

定义可复用的样式块：

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.example {
  @include center;
}

函数

定义和使用函数：

@function double($n) {
  @return $n * 2;
}

.example {
  font-size: double(16px);
}

5. 在项目中组织 SCSS 文件

为了保持代码的可维护性，可以按功能或模块组织 SCSS 文件：

src/
├── assets/
│   └── styles/
│       ├── variables.scss   // 全局变量
│       ├── mixins.scss      // 全局混合
│       ├── reset.scss       // 全局重置样式
│       └── global.scss      // 全局样式
└── components/
    └── ExampleComponent.vue // 组件样式