vue3项目使用的SCSS怎么使用？为啥用

在Vue3项目中使用SCSS通常是为了样式管理，因为SCSS提供了一种模块化的、组织良好的语法，可以更方便地编写和维护CSS。以下是使用SCSS的基本步骤：

1. **安装依赖**：首先需要在项目中安装Node.js，并通过`npm install`或`yarn add`命令添加Sass编译器，如`sass-loader`和`node-sass`（推荐使用`sass`库替代`node-sass`，因为它已被弃用并由`dart-sass`取代）。

npm install sass-loader node-sass --save-dev // 或 yarn add sass-loader dart-sass --dev

2. **配置webpack**：在项目的`vue.config.js`文件中，配置Sass加载器，使其能在构建过程中编译SCSS文件。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
        .test(/\.s[ac]ss$/i)
        .use('sass-loader')
          .loader('sass-loader')
          .options({
            // 根据需要自定义配置选项，如indentedSyntax: true (适用于旧版SASS语法)
          });
  },
};

3. **引用SCSS**：在`.vue`组件的模板（`<template>`部分）中，用`<style lang="scss">`标签引入SCSS文件，或者直接在`.vue`文件中编写SCSS代码并在`export default`中设置`scoped`属性来限制选择器作用域。

<template>
  <div>
    <!-- ... -->
  </div>
</template>

<style scoped lang="scss">
@import 'path/to/your/styles.scss';
</style>

为何选择SCSS的原因包括：
- **变量和嵌套规则**：使得样式代码更具组织性，减少重复。
- **混合（Mixins）**：复用样式片段，便于代码共享和维护。
- **函数和操作符**：提供更多高级功能，如计算单位等。
- **模块化**：支持命名空间，提高团队协作效率。