Vue 3项目配置Sass支持的核心是安装依赖和全局引入：Vite项目只需npm install -D sass并在vite.config.ts中通过css.preprocessorOptions.scss.additionalData配合@use注入全局变量与mixin；Vue CLI项目需安装sass和sass-loader，并在vue.config.js中用css.loaderOptions.scss.additionalData配置，均推荐使用@use而非@import。

Vue 3 项目初始化时配置 Sass 支持，核心就两步：安装依赖 + 正确引入全局样式文件。Vite 项目和 Vue CLI 项目的做法略有不同，但都不复杂。

确认项目脚手架类型

先判断你用的是 Vite 还是 Vue CLI：

• 用 npm init vue@latest 或 create-vue 创建的，默认是 Vite（推荐）
• 用 vue create 创建的，属于 Vue CLI 项目

两者配置位置和写法不同，别混用。

Vite 项目中启用 Sass

只需安装 sass，无需 sass-loader（Vite 内置支持）：

立即学习“前端免费学习笔记（深入）”；

npm install -D sass

然后在 vite.config.ts（或 .js）的 css.preprocessorOptions.scss 中配置全局注入：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@use "@/styles/variables.scss" as *; @use "@/styles/mixins.scss" as *;`
    }
  }
}

注意：@use 是现代 Sass 推荐语法，比 @import 更安全；路径中的 @/ 需确保已在 resolve.alias 中正确定义为 src 目录。

Vue CLI 项目中启用 Sass

安装依赖：

npm install -D sass sass-loader

在 vue.config.js 中配置：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@use "@/styles/variables.scss" as *;`
      }
    }
  }
}

⚠️ 不要用 @import 引入多个文件拼接字符串，容易出错；优先用 @use + as * 合并命名空间。

验证是否生效

在任意 <style lang="scss"> 块里试试：

• 直接使用变量：color: $primary-color;
• 调用 mixin：@include flex-center;
• 用 Sass 内置函数：width: math.div(100%, 3);（需先 @use "sass:math"）

不报错且样式正常渲染，说明配置成功。