故事后来都变了刚接手一个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++实现的，已经被官方宣布deprecated，新项目绝对不要再装，老项目也建议尽早迁移。现在Sass官方推荐的是Dart Sass实现的sass包，npm安装命令就是npm install -D sass，功能更完整、维护更活跃，而且对CSS新特性的跟进比LibSass快很多。
我额外提一句，Windows上很多人遇到过node-sass装不上，核心原因是它需要下载当前平台对应版本的二进制文件，而下载过程经常受网络、Node版本、本地编译工具链影响，动不动就报node-gyp错误。换成sass包之后，这类问题绝大部分都会消失，因为Dart Sass在npm install时不会去搞二进制下载那一套，省心非常多。
2.2 Vite项目的安装和配置
如果你用的是Vite，安装Sass相当省事。先在项目根目录执行：
bash复制npm install -D sass
然后直接在组件里把style标签加上lang="scss"就可以用了：
vue复制<style lang="scss" scoped>
.card {
padding: 16px;
.title {
font-size: 18px;
}
}
</style>
Vite内部对sass/scss文件是开箱支持的，不需要额外装loader，也不需要改vite.config.ts，只有在需要全局注入变量或混合宏的时候，才需要动一下css.preprocessorOptions，这个第4节会展开。
需要注意一点，Vite对.sass和.scss都会识别，但.sass是缩进语法，写法和普通CSS差异很大，日常开发建议统一使用.scss，这也是我强调标题里Sass（scss）这个写法时的第一反应：别真的去写缩进语法，团队协作里那是灾难。
2.3 Vue CLI / Webpack项目的安装和版本匹配
Vue CLI项目或者手动搭的Webpack项目，安装就多了一道工序。你需要两个包：sass和sass-loader。
bash复制npm install -D sass sass-loader
sass-loader负责把scss文件交给dart-sass编译，再交给webpack处理。问题常常出在版本匹配上：如果你是Vue CLI 4或者webpack 4，装13以上的sass-loader很容易报选项校验错误；如果你是webpack 5，sass-loader 10以下又会因为webpack接口变化跑不起来。我的经验是：
- Vue CLI 4 / webpack 4：
sass-loader@10最稳 - Vue CLI 5 / webpack 5：
sass-loader@13或更高版本
装完后如果启动报错，先别急着重装，把报错里的options、legacy这几个关键词拿出来搜，多半就是版本对应关系出了问题。
2.4 安装过程中常见的坑
装包阶段最常见的报错有两类。一类是npm安装到一半就报UNMET PEER DEPENDENCY，这通常是sass-loader要求的webpack版本和你项目里的webpack版本不一致造成的，最省事的办法是先用npm info sass-loader peerDependencies查清对应关系，再锁定版本安装。另一类是npm install完成之后，一启动项目就报Module build failed: Error: Node Sass does not yet support your current environment，这种基本就是你package.json里还挂着node-sass，直接换成sass包就能解决，不用去折腾C++编译环境。
还有个细节，Vite项目里如果装错了包，比如把sass-loader装进去，Vite启动时会提示你并不需要它。看到这种提示别慌，卸载掉就好，Vite走的是自己的插件链路，和webpack的loader体系不是一回事，别混着用。
3. 在单文件组件里用SCSS：从lang="scss"到scoped样式联动
3.1 基本写法和sass/scss后缀的区别
先明确一个容易混淆的点：Sass是这门预处理器语言的名字，它有两种语法，一种是早期的缩进语法，文件后缀是.sass；另一种是兼容CSS写法的SCSS语法，文件后缀是.scss。在Vue组件里，几乎所有人用的都是SCSS，因为SCSS代码和CSS基本长得一样，只是多了变量、嵌套这些能力，对于团队里其他前端来说零学习成本。
所以在<style>标签里写的是lang="scss"，而不是lang="sass"。如果你真的想用缩进语法，也不是不行，但团队约定、代码格式化、在线demo调试这些环节都会更麻烦，没必要给自己制造维护障碍。
3.2 scoped的原理和选择器变化
Vue的scoped样式会把当前组件的所有选择器加上一个data-v-xxxx属性，编译后选择器变成类似.card[data-v-7ac3a1f0]的形式，这样样式就被限定在当前组件范围内，不会污染全局。原理本身不复杂，但实际用起来有几个坑。
第一个坑是当你使用SCSS嵌套时，scoped编译后是在最后一个选择器上绑定属性，这本来没问题，可一旦你嵌套得很深，选择器会变得很长，权重也随之上涨。比如你写.page .card .title，编译后是.page .card .title[data-v-xxx]，这比单类选择器难覆盖得多，后期想微调样式就得靠更深的选择器去压，恶性循环。
第二个坑是修改第三方组件内部样式的时候，scoped会挡住你，因为第三方组件内部的大多数DOM节点没有当前组件的data-v属性，你的属性选择器匹配不到它们。这时候就要引入深度选择器了。
3.3 覆盖第三方组件样式：:deep()的正确姿势
Vue 2时代，覆盖第三方组件内部样式普遍用/deep/或者::v-deep。到了Vue 3，官方把写法统一改成了:deep()，过去的写法在Vue 3里会报警告甚至直接失效。如果你维护的是Vue 2项目，用/deep/是常见选择；如果是Vue 3，就统一用:deep()，没有第二种选择。
拿个很常见的场景举例：你在项目里引入了Element Plus的轮播组件，想调整内部指示器的样式。直接写：
vue复制<style lang="scss" scoped>
.my-carousel :deep(.el-carousel__indicator) {
height: 18px;
}
</style>
这样编译后，Vue只会把:deep()外面那个.my-carousel加上data-v属性，括号内的.el-carousel__indicator保持原样，从而匹配到第三方组件内部的DOM。这比去掉scoped再写全局样式要安全得多，样式影响范围还是被锁在当前组件里。
这里有个实战细节：:deep()前面最好带一个自己的根类名，把范围收紧。如果你直接写:deep(.el-carousel__indicator)，它会从当前组件作用域下找所有符合条件的元素，一旦页面里有多个轮播且样式需求不一致，就容易误伤。带上根类名后，匹配范围收缩到明确区间，大型项目里查样式问题会轻松很多。
4. 全局变量与公共样式的工程化管理
4.1 项目里styles目录怎么规划
给项目引入SCSS之后，第一件事不是急着写嵌套，而是先把公共样式目录搭起来。我的习惯是在src下建一个styles目录，里面至少分四个文件：
variables.scss：放颜色、字号、间距、圆角、层级这些设计变量mixins.scss：放复用度高的混合宏，比如flex居中、单行省略、清除浮动、响应式断点functions.scss：放需要计算的函数，比如px转rem、颜色加深变浅index.scss：作为总入口，引入全局重置样式和少量工具类
这个目录规划不是花架子，它解决的是组件内样式文件的"复用饥渴"问题。如果不做这一步，你很快就会发现组件里开始出现一堆局部变量、局部mixin，其他组件又得复制一份，最后全局变量和局部变量搅在一起，维护体验比纯CSS还差。公共的归公共，组件的归组件，这个边界从一开始就要划清楚。
4.2 为什么新项目要用@use而不是@import
老一点的学习资料里，大部分都在教你用@import引入其他scss文件。但请注意，现在的Dart Sass官方已经明确将@import标记为弃用，新项目应该使用@use和@forward。原因很现实：@import会把引入的文件内容直接复制进来，同名变量会互相覆盖，你根本不知道最终生效的是哪个值；而且同一个文件被反复@import，编译产物里就反复出现一段代码，体积和编译时间都在悄悄上涨。@use则像模块加载器，每个模块只加载一次，默认还用命名空间隔离变量，从源头上避免了命名冲突。
举个例子，以前写@import "variables";之后可以直接用$primary，改成@use之后，同一份代码里要用variables.$primary，除非你在导入时显式写@use "variables" as *;。这种"多打几个字"反而能一眼看出变量来自哪个文件，对长期维护是好事。
提示：如果你接手的是还在用
@import的老项目，不要一次性全量替换，可以先把新增文件用@use，老文件逐步迁移。Sass在编译时仍兼容老写法，但会有弃用警告，留出迁移窗口。
4.3 Vite下全局注入变量：css.preprocessorOptions.additionalData
很多组件里都要用$primary、$font-size这些全局变量，如果每个组件文件开头都手写一句@use "@/styles/variables.scss" as *;，既啰嗦又容易漏。更规范的方案是全局注入。Vite在vite.config.ts里这样配：
ts复制css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/variables.scss" as *; @use "@/styles/mixins.scss" as *;`
}
}
}
这样配置之后，每个被sass编译的scss内容顶部都会被自动插入这两行引用，组件里直接写变量名就能用。这里有几个容易踩的雷。
第一个，additionalData里引用的文件路径，@别名必须已经配置，而且最好用绝对别名而不是相对路径，否则不同深度的组件文件会解析到不同位置，报错时你会一脸懵。第二个，如果你在additionalData里注入了mixins.scss，而mixins.scss内部又@use了variables.scss，请确保variables.scss没有被以不同方式重复加载，否则Sass可能报模块重复加载或命名空间冲突。第三个，全局注入只对组件style块和项目里的.scss文件生效，它不会改变样式优先级，只是让变量可用，别误以为把样式也全局注入了。
4.4 Vue CLI / Webpack下用style-resources-loader注入
Vue CLI项目没有additionalData这个现成选项，但可以用style-resources-loader这个webpack插件达到同样的效果。在vue.config.js里加一段配置：
js复制const path = require('path');
module.exports = {
chainWebpack: (config) => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
types.forEach((type) => {
config.module
.rule('scss')
.oneOf(type)
.use('style-resources-loader')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, 'src/styles/variables.scss'),
path.resolve(__dirname, 'src/styles/mixins.scss')
]
})
.end();
});
}
};
这段配置的意思是，把variables.scss和mixins.scss注入到每个vue组件的style块开头，效果和Vite的additionalData类似。用法上有几个小提醒：pattern里填的是绝对路径，不要用~开头，也不要手滑写成glob模式，否则加载器会报找不到文件。另外，注入的文件务求精简，我见过有人把一整个element-ui的全局覆盖样式也塞进patterns里，结果每个组件的样式体积都被撑大、编译时间肉眼可见地变慢，这属于本末倒置。
4.5 把SCSS变量导出给JS：:export的用法
有时候，业务逻辑也需要同一个主题色。比如页面里有动态生成的图表，颜色要跟组件样式保持一致，这时候如果JS里再写一遍颜色值，就出现了"两个数据源"，改起来容易漏。标准做法是借助:export语法，把变量导出给JS，这在Webpack和Vite的编译体系里都是支持的：
scss复制// variables.scss
$primary: #409EFF;
$success: #67C23A;
:export {
primary: $primary;
success: $success;
}
然后在JS里：
js复制import styles from '@/styles/variables.scss';
console.log(styles.primary); // "#409EFF"
这个方案底层是css-loader或Vite对:export语法的支持，实际项目里用来同步图表配色、canvas颜色都很方便。不过别高兴太早，如果你需要的是运行时动态切换主题色，建议还是用CSS变量方案：把颜色挂在:root上，JS通过getComputedStyle(document.documentElement).getPropertyValue('--primary')读取或更新。SCSS变量是编译期常量，CSS变量是运行期值，两者分工不同，用对场景才不拧巴。
5. 高频SCSS写法在真实组件里的落地示例
5.1 用变量统一设计规范
先看一个用变量承载设计规范的示范。假设项目有主色、辅助色、标准间距、圆角这些token，在variables.scss里统一定义：
scss复制$primary: #409EFF;
$danger: #F56C6C;
$warning: #E6A23C;
$spacing-base: 4px;
$radius-base: 4px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 16px;
组件里再写样式时，就不要出现裸颜色值了：
scss复制.page-header {
padding: $spacing-base * 4;
font-size: $font-size-lg;
color: $primary;
}
这样做的好处，改颜色时只动variables.scss一个文件，全站自然生效，层级多了效果尤其明显。很多组件库本身也提供一套SCSS变量来做主题定制，你只需要在引入库样式之前覆盖这些变量，样式就会跟着变。Element Plus和Ant Design Vue的定制文档里都有类似机制，本质就是SCSS变量在编译期的覆盖能力。
5.2 嵌套与&父选择器的实战
SCSS嵌套最容易写嗨，但我要先说一句：嵌套层级超过三层，可读性就开始下降，超过五层基本就是等着被后来人骂。合理的嵌套一定离不开&符号。&代表当前选择器的父选择器，它能让"兄弟状态""伪类""同元素修饰"这些场景变得非常直观：
scss复制.btn {
display: inline-flex;
align-items: center;
background: $primary;
color: #fff;
&:hover {
background: darken($primary, 5%);
}
&.is-disabled {
background: #ccc;
cursor: not-allowed;
}
&-text {
margin-left: 4px;
}
}
这里的&:hover展开后就等于.btn:hover，&.is-disabled等于.btn.is-disabled，&-text等于.btn-text。用&改造后，相关状态和子元素都收在.btn内部，结构一目了然。
要提醒一下