Vue3 + Vite 项目中 SCSS 使用详解：为什么使用 SCSS，以及 preprocessorOptions 配置原理

一、什么是 SCSS？

在前端开发中，我们通常使用 CSS 编写页面样式：

css 复制代码

.box {
  color: red;
}

但是随着项目越来越复杂，CSS 会出现很多问题：

样式代码重复
主题颜色修改困难
公共样式无法复用
文件越来越难维护

因此出现了 CSS 预处理器。

常见 CSS 预处理器：

Sass / SCSS
Less
Stylus

其中 SCSS 是目前 Vue 项目中比较常用的一种。

二、SCSS 和 CSS 的关系

需要注意：

SCSS 不是新的 CSS，它是 CSS 的增强写法。

浏览器无法直接识别 SCSS。

实际流程：

复制代码

SCSS文件
   |
   ↓
Sass编译器
   |
   ↓
CSS文件
   |
   ↓
浏览器执行

例如：

SCSS：

scss 复制代码

$primary-color: #409eff;

.box {
  color: $primary-color;
}

经过编译：

css 复制代码

.box {
  color: #409eff;
}

最终浏览器执行的还是 CSS。

三、为什么项目中要使用 SCSS？

1. 支持变量

普通 CSS：

css 复制代码

.header {
  color: #409eff;
}

.footer {
  color: #409eff;
}

如果主题颜色修改：

需要修改很多地方。

SCSS：

scss 复制代码

$primary-color:#409eff;


.header {
  color:$primary-color;
}


.footer {
  color:$primary-color;
}

只需要修改：

scss 复制代码

$primary-color:red;

所有地方都会同步变化。

2. 支持嵌套写法

普通 CSS：

css 复制代码

.menu {

}

.menu .item {

}

.menu .item span {

}

SCSS：

scss 复制代码

.menu {

  .item {

    span {

    }

  }

}

编译结果：

css 复制代码

.menu .item span {

}

代码结构更加接近 HTML。

3. 支持父级引用 &

例如：

CSS：

css 复制代码

.button {

}

.button:hover {

}

SCSS：

scss 复制代码

.button {

  &:hover {

  }

}

其中：

scss 复制代码

代表当前选择器。

编译：

css 复制代码

.button:hover {

}

4. 支持 mixin 代码复用

比如很多地方需要 flex 居中：

CSS：

css 复制代码

.box1 {
 display:flex;
 justify-content:center;
 align-items:center;
}


.box2 {
 display:flex;
 justify-content:center;
 align-items:center;
}

存在大量重复。

SCSS：

scss 复制代码

@mixin flex-center {

 display:flex;
 justify-content:center;
 align-items:center;

}


.box1 {

 @include flex-center;

}


.box2 {

 @include flex-center;

}

四、SCSS 文件写法

Vue 中：

vue 复制代码

<template>

<div class="box">
  Hello
</div>

</template>


<style lang="scss">

.box {

  color:red;

}

</style>

重点：

html 复制代码

<style lang="scss">

告诉 Vue：

这个 style 使用 SCSS 编译。

五、Vite 为什么需要配置 preprocessorOptions？

在 Vue3 + Vite 项目中：

默认情况下：

vue 复制代码

<style lang="scss">

</style>

可以使用 SCSS。

但是如果项目中有公共变量：

例如：

复制代码

src
 └── assets
     └── styles
          ├── variables.scss
          ├── mixins.scss
          └── index.scss

variables.scss：

scss 复制代码

$primary-color:#409eff;

组件：

vue 复制代码

<style lang="scss">

.title {

 color:$primary-color;

}

</style>

会报错：

复制代码

Undefined variable $primary-color

原因：

当前组件不知道：

scss 复制代码

$primary-color

在哪里定义。

六、additionalData 全局注入 SCSS

Vite 提供：

js 复制代码

css:{
  preprocessorOptions:{
    scss:{
      additionalData:
      '@use "@/assets/styles/index.scss" as *;'
    }
  }
}

作用：

自动给每一个 SCSS 文件顶部添加代码。

例如：

你写：

vue 复制代码

<style lang="scss">

.title {

 color:$primary-color;

}

</style>

Vite 编译前自动变成：

scss 复制代码

@use "@/assets/styles/index.scss" as *;


.title {

 color:$primary-color;

}

所以所有组件都可以直接使用公共变量。

七、preprocessorOptions 结构解析

配置：

js 复制代码

css:{
  preprocessorOptions:{
    scss:{},
    less:{}
  }
}

为什么有：

js 复制代码

scss
less

因为：

Vite 根据文件后缀匹配。

例如：

SCSS文件

复制代码

test.scss

使用：

js 复制代码

preprocessorOptions.scss

Less文件

复制代码

test.less

使用：

js 复制代码

preprocessorOptions.less

所以官方说：

文件扩展名用作选项的键。

意思就是：

文件后缀 = 配置名称。

八、是否必须使用 preprocessorOptions？

答案：

不是。

情况1：不用 SCSS

普通 CSS：

vue 复制代码

<style>

.box{

}

</style>

不需要任何配置。

情况2：使用 SCSS，但是手动引入

组件：

scss 复制代码

@use "@/assets/styles/index.scss" as *;


.box{

 color:$primary-color;

}

也可以。

情况3：大型项目推荐配置

企业后台系统：

例如：

管理后台
数据分析平台
BI系统
组件库

通常：

复制代码

styles
├── variables.scss
├── mixins.scss
├── functions.scss
└── index.scss

然后：

vite.config.js：

js 复制代码

css:{
 preprocessorOptions:{
   scss:{
     additionalData:
     '@use "@/assets/styles/index.scss" as *;'
   }
 }
}

这样维护成本最低。

九、SCSS 和 Tailwind CSS 的区别

现在很多 Vue3 项目会同时使用：

Tailwind CSS
SCSS

两者用途不同。

Tailwind

负责：

快速布局：

html 复制代码

<div class="flex justify-center text-red-500">
</div>

适合：

页面搭建
通用样式

SCSS

负责：

复杂样式逻辑：

例如：

主题变量
动画
第三方组件覆盖
复杂组件样式

例如：

scss 复制代码

$primary-color:#409eff;


.card {

 border-color:$primary-color;

}

十、总结

功能	CSS	SCSS
普通类选择器	支持	支持
变量	不支持	支持
嵌套	不支持	支持
代码复用	困难	支持Mixin
主题管理	困难	方便
大型项目维护	较差	更好

在 Vue3 + Vite 企业项目中：