脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3+Vite中SCSS使用

Vue3+Vite项目中SCSS使用指南

 更新时间：2026年07月29日 09:21:11   作者：前端糕手  
还在为CSS重复代码和主题修改头疼,本文深入讲解SCSS核心特性,包括变量、嵌套、mixin复用等,并手把手教你如何在Vue3+Vite项目中通过preprocessorOptions全局注入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;

}

十、总结

功能CSSSCSS
普通类选择器支持支持
变量不支持支持
嵌套不支持支持
代码复用困难支持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使用的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论