Vue3+Vite项目中SCSS使用指南
作者：前端糕手
一、什么是 SCSS？
在前端开发中，我们通常使用 CSS 编写页面样式：
.box {
color: red;
}但是随着项目越来越复杂，CSS 会出现很多问题：
- 样式代码重复
- 主题颜色修改困难
- 公共样式无法复用
- 文件越来越难维护
因此出现了 CSS 预处理器。
常见 CSS 预处理器：
- Sass / SCSS
- Less
- Stylus
其中 SCSS 是目前 Vue 项目中比较常用的一种。
二、SCSS 和 CSS 的关系
需要注意：
SCSS 不是新的 CSS，它是 CSS 的增强写法。
浏览器无法直接识别 SCSS。
实际流程：
SCSS文件 | ↓ Sass编译器 | ↓ CSS文件 | ↓ 浏览器执行
例如：
SCSS：
$primary-color: #409eff;
.box {
color: $primary-color;
}经过编译：
.box {
color: #409eff;
}最终浏览器执行的还是 CSS。
三、为什么项目中要使用 SCSS？
1. 支持变量
普通 CSS：
.header {
color: #409eff;
}
.footer {
color: #409eff;
}
如果主题颜色修改：
需要修改很多地方。
SCSS：
$primary-color:#409eff;
.header {
color:$primary-color;
}
.footer {
color:$primary-color;
}
只需要修改：
$primary-color:red;
所有地方都会同步变化。
2. 支持嵌套写法
普通 CSS：
.menu {
}
.menu .item {
}
.menu .item span {
}
SCSS：
.menu {
.item {
span {
}
}
}
编译结果：
.menu .item span {
}
代码结构更加接近 HTML。
3. 支持父级引用 &
例如：
CSS：
.button {
}
.button:hover {
}
SCSS：
.button {
&:hover {
}
}
其中：
&
代表当前选择器。
编译：
.button:hover {
}
4. 支持 mixin 代码复用
比如很多地方需要 flex 居中：
CSS：
.box1 {
display:flex;
justify-content:center;
align-items:center;
}
.box2 {
display:flex;
justify-content:center;
align-items:center;
}
存在大量重复。
SCSS：
@mixin flex-center {
display:flex;
justify-content:center;
align-items:center;
}
.box1 {
@include flex-center;
}
.box2 {
@include flex-center;
}
四、SCSS 文件写法
Vue 中：
<template>
<div class="box">
Hello
</div>
</template>
<style lang="scss">
.box {
color:red;
}
</style>
重点：
<style lang="scss">
告诉 Vue：
这个 style 使用 SCSS 编译。
五、Vite 为什么需要配置 preprocessorOptions？
在 Vue3 + Vite 项目中：
默认情况下：
<style lang="scss"> </style>
可以使用 SCSS。
但是如果项目中有公共变量：
例如：
src
└── assets
└── styles
├── variables.scss
├── mixins.scss
└── index.scss
variables.scss：
$primary-color:#409eff;
组件：
<style lang="scss">
.title {
color:$primary-color;
}
</style>
会报错：
Undefined variable $primary-color
原因：
当前组件不知道：
$primary-color
在哪里定义。
六、additionalData 全局注入 SCSS
Vite 提供：
css:{
preprocessorOptions:{
scss:{
additionalData:
'@use "@/assets/styles/index.scss" as *;'
}
}
}
作用：
自动给每一个 SCSS 文件顶部添加代码。
例如：
你写：
<style lang="scss">
.title {
color:$primary-color;
}
</style>
Vite 编译前自动变成：
@use "@/assets/styles/index.scss" as *;
.title {
color:$primary-color;
}
所以所有组件都可以直接使用公共变量。
七、preprocessorOptions 结构解析
配置：
css:{
preprocessorOptions:{
scss:{},
less:{}
}
}
为什么有：
scss less
因为：
Vite 根据文件后缀匹配。
例如：
SCSS文件
test.scss
使用：
preprocessorOptions.scss
Less文件
test.less
使用：
preprocessorOptions.less
所以官方说：
文件扩展名用作选项的键。
意思就是：
文件后缀 = 配置名称。
八、是否必须使用 preprocessorOptions？
答案：
不是。
情况1：不用 SCSS
普通 CSS：
<style>
.box{
}
</style>
不需要任何配置。
情况2：使用 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：
css:{
preprocessorOptions:{
scss:{
additionalData:
'@use "@/assets/styles/index.scss" as *;'
}
}
}
这样维护成本最低。
九、SCSS 和 Tailwind CSS 的区别
现在很多 Vue3 项目会同时使用：
- Tailwind CSS
- SCSS
两者用途不同。
Tailwind
负责：
快速布局：
<div class="flex justify-center text-red-500"> </div>
适合：
- 页面搭建
- 通用样式
SCSS
负责：
复杂样式逻辑：
例如：
- 主题变量
- 动画
- 第三方组件覆盖
- 复杂组件样式
例如：
$primary-color:#409eff;
.card {
border-color:$primary-color;
}
十、总结
| 功能 | CSS | SCSS |
|---|---|---|
| 普通类选择器 | 支持 | 支持 |
| 变量 | 不支持 | 支持 |
| 嵌套 | 不支持 | 支持 |
| 代码复用 | 困难 | 支持Mixin |
| 主题管理 | 困难 | 方便 |
| 大型项目维护 | 较差 | 更好 |
在 Vue3 + Vite 企业项目中：
推荐：
src
└── assets
└── styles
├── variables.scss
├── mixins.scss
└── index.scss
配合：
css:{
preprocessorOptions:{
scss:{
additionalData:
'@use "@/assets/styles/index.scss" as *;'
}
}
}
可以实现：
- 全局变量
- 全局函数
- 全局 mixin
- 统一主题管理
这也是目前 Vue3 + Vite 中比较常见的 SCSS 工程化方案。
标签选择器直接影响html中所有
通配符影响所有元素
class选择器只有html写了class才生效
以上就是Vue3+Vite项目中SCSS使用指南的详细内容，更多关于Vue3+Vite中SCSS使用的资料请关注脚本之家其它相关文章！