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

一、什么是 SCSS在前端开发中我们通常使用 CSS 编写页面样式.box{color:red;}但是随着项目越来越复杂CSS 会出现很多问题样式代码重复主题颜色修改困难公共样式无法复用文件越来越难维护因此出现了 CSS 预处理器。常见 CSS 预处理器Sass / SCSSLessStylus其中 SCSS 是目前 Vue 项目中比较常用的一种。二、SCSS 和 CSS 的关系需要注意SCSS 不是新的 CSS它是 CSS 的增强写法。浏览器无法直接识别 SCSS。实际流程SCSS文件 | ↓ Sass编译器 | ↓ CSS文件 | ↓ 浏览器执行例如SCSS$primary-color: #409eff; .box { color: $primary-color; }经过编译.box{color:#409eff;}最终浏览器执行的还是 CSS。三、为什么项目中要使用 SCSS1. 支持变量普通 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;}存在大量重复。SCSSmixin flex-center { display:flex; justify-content:center; align-items:center; } .box1 { include flex-center; } .box2 { include flex-center; }四、SCSS 文件写法Vue 中template div classbox Hello /div /template style langscss .box { color:red; } /style重点stylelangscss告诉 Vue这个 style 使用 SCSS 编译。五、Vite 为什么需要配置 preprocessorOptions在 Vue3 Vite 项目中默认情况下style langscss /style可以使用 SCSS。但是如果项目中有公共变量例如src └── assets └── styles ├── variables.scss ├── mixins.scss └── index.scssvariables.scss$primary-color:#409eff;组件style langscss .title { color:$primary-color; } /style会报错Undefined variable $primary-color原因当前组件不知道$primary-color在哪里定义。六、additionalData 全局注入 SCSSVite 提供css:{preprocessorOptions:{scss:{additionalData:use /assets/styles/index.scss as *;}}}作用自动给每一个 SCSS 文件顶部添加代码。例如你写style langscss .title { color:$primary-color; } /styleVite 编译前自动变成use /assets/styles/index.scss as *; .title { color:$primary-color; }所以所有组件都可以直接使用公共变量。七、preprocessorOptions 结构解析配置css:{preprocessorOptions:{scss:{},less:{}}}为什么有scss less因为Vite 根据文件后缀匹配。例如SCSS文件test.scss使用preprocessorOptions.scssLess文件test.less使用preprocessorOptions.less所以官方说文件扩展名用作选项的键。意思就是文件后缀 配置名称。八、是否必须使用 preprocessorOptions答案不是。情况1不用 SCSS普通 CSSstyle .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.jscss:{preprocessorOptions:{scss:{additionalData:use /assets/styles/index.scss as *;}}}这样维护成本最低。九、SCSS 和 Tailwind CSS 的区别现在很多 Vue3 项目会同时使用Tailwind CSSSCSS两者用途不同。Tailwind负责快速布局divclassflex 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才生效