在 Vue 项目中，要使用 SCSS 预处理器，具体需要安装哪些依赖，以及在项目配置中如何进行配置？配置完成后，应如何在单文件组件中使用 SCSS？

回答思路

1. 【回答框架 1】在 Vue 项目中引入 SCSS，首先需要通过 npm 安装 sass 和 sass-loader（对于 Vue CLI 项目，sass-loader 已内置，但需安装 sass）。对于 Vite 项目，则只需安装 sass 即可。
2. 【回答框架 2】对于 Vue CLI 项目（如 Vue 2/3），安装完成后，通常无需额外配置，即可在组件中使用 lang='scss'。若要全局共享变量或混入，可以通过在 vue.config.js 中添加 css.loaderOptions.scss.prependData（Vue CLI 4）或 additionalData（Vue CLI 5）来注入。
3. 【回答框架 3】对于 Vite 项目，同样安装 sass 后，如果需要在组件中全局使用变量，可以在 vite.config.js 中通过 css.preprocessorOptions.scss.additionalData 来注入，例如引入变量文件。
4. 【回答框架 4】在单文件组件中使用时，只需在 style 标签上添加 lang='scss'，即可编写 SCSS 代码。如果希望样式只作用于当前组件，可添加 scoped 属性。
5. 【回答框架 5】需要注意的是，项目运行时若出现 sass 相关错误，应检查 sass 与 sass-loader 的版本兼容性。对于现代项目，推荐使用 sass 而非 node-sass。
6. 【关键点 1】Vue CLI 项目需安装 sass（或 node-sass）和 sass-loader；Vite 项目只需安装 sass。
7. 【关键点 2】使用 lang='scss' 在 style 标签中启用 SCSS。
8. 【关键点 3】全局共享变量时，Vue CLI 通过 loadOptions 配置，Vite 通过 preprocessorOptions 配置。
9. 【易错点 1】不要混淆 sass 与 node-sass 的安装，node-sass 可能因 Node 版本不兼容而失败。
10. 【易错点 2】在 Vue CLI 4 和 5 中，注入全局样式的配置项不同（prependData 与 additionalData），需注意区分。
11. 【易错点 3】使用 scoped 时，深度选择器建议使用 :deep() 而非 /deep/ 或 >>>。