故事后来都变了刚接手一个Vue项目的时候，第一个让我皱眉的不是业务逻辑，而是样式文件。一个组件里塞了900行CSS，想在某个元素上换个颜色需要全局搜索，想给按钮做移动端适配，发现媒体查询手写了七八份，真到了改主题色那天，我才意识到这个项目离失控就差一次全局替换。也是从那天起，我决定把所有组件的style块从CSS换成Sass（SCSS）。如果你也在Vue项目里写过这样的CSS，或者正在纠结style块里的变量、嵌套、复用要怎么落地，这篇记录应该能帮你少走不少弯路。
我下面讲的内容，不是Sass官方文档的翻译，而是我在实际项目里装包、配环境、写组件、覆盖第三方库样式这一整套过程中沉淀下来的经验，包括安装时版本怎么选、Vite和Webpack环境分别怎么配、scoped和深度选择器为什么那么绕、全局变量怎么注入不踩坑，以及一批我已经帮你踩平的编译报错。基础偏薄的同学可以按顺序读，已经很熟的话直接跳到第6节的踩坑清单查漏补缺。
1. 为什么Vue项目值得上SCSS：先想清楚再动手
1.1 CSS在组件化开发里的三个实际痛点
先聊点反直觉的事：Vue组件化把JS和模板拆得很干净，唯独CSS落下了。你当然可以每个组件写一段<style scoped>，但用不了多久就会撞上几个问题。第一个是公共变量没法共享，主色、间距、圆角这些设计规范里的数值，只能一个组件一个组件地复制粘贴，哪天设计稿说主色从#409EFF改成#2D8CF0，你就得祈祷自己找得全所有出处。第二个是重复代码没有复用载体，一个flex水平垂直居中、一个单行省略号、一个清除浮动，在十几个组件里反复出现，每次都要重新写一遍，纯属浪费。第三个是选择器层级和可读性，CSS不支持嵌套，写层级选择器就得靠BEM这类命名规范硬撑，类名越长越容易写错，一旦写错又得整页搜索，试错的成本全压在开发者身上。
这三个痛点其实是CSS这门语言本身的短板：没有变量、没有复用机制、没有嵌套语法。而Sass/SCSS恰好就是给CSS补上这些能力而生的。它保留CSS的写法，又加上了一整套工程化能力，这也是我把它列为Vue项目样式方案第一选择的原因。
1.2 SCSS和Less、Stylus、CSS-in-JS怎么选
选预处理器的时候，很多人都问过Less、Sass、Stylus到底选哪个。Less语法上手快，变量和嵌套都有，但函数、循环、内置模块这些工程化能力弱一些，项目一大就容易发现能力不够用。Stylus语法灵活得过头，同一个选择器能写出好几种风格，团队没有统一约定的话，代码风格容易失控。Sass则更像一门带工程思维的CSS超集：有变量、嵌套、mixin、函数、流程控制、内置模块，基本上把CSS里"写起来费劲、维护起来头痛"的部分都补齐了，而且从诞生到现在积累了非常成熟的文档和社区方案。
另一种声音是CSS-in-JS，也就是styled-components那类方案，它在React生态里确实流行，但Vue的模板、脚本、样式三段式结构本身就很清晰，再把样式写成JS对象有点绕回原点了，还得额外承担运行时开销和热更新时的样式注入成本。所以我的建议很直接：Vue项目里做样式增强，选SCSS是性价比最高的，稳妥、通用、长期维护有保障。
1.3 SCSS在Vue SFC里的定位
Vue的单文件组件（SFC）天然把template、script、style放在一起，SCSS在这里的角色就是style块的编译增强：它不影响运行时，不增加额外依赖，浏览器最终看到的依然是标准CSS。这一点很关键，意味着你完全可以在项目已经跑起来之后再逐步把style块改成lang="scss"，改一个组件验证一个，风险很小，不需要推到重来。
另一个加分项是Vue的scoped机制和SCSS是能好好配合的，后面第3节我会专门讲怎么配合、怎么用深度选择器，那部分才是很多人真正卡壳的地方。先说结论：SCSS本身解决的是"写样式累不累"的问题，scoped解决的是"样式会不会串"的问题，两者配合得当，整个项目的样式代码会从"一锅粥"变成"有秩序的文件系统"。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 安装Sass：版本选型和环境适配
2.1 node-sass已经翻篇，首选sass（dart-sass）
如果你在网上搜过Sass安装方法，大概率会看到一大堆用node-sass的命令，甚至package.json里还躺着node-sass: "^4.x"。这里先破个三观：node-sass是基于LibSass C++实现的