必须安装sass和svelte-preprocess（-D）、在svelte.config.js中正确配置preprocess选项，且组件style标签需指定lang="scss"，三者缺一不可；否则报Unknown language "scss"或类型错误。
安装 sass 和 svelte-preprocess 依赖
不装这两个包，sass 文件根本不会被识别，构建会直接报错 [svelte-preprocess] Encountered type error 或 Unknown language "scss"。Vite 或 SvelteKit 默认不带预处理器运行时支持，必须显式安装。
执行以下命令（推荐 pnpm）：
pnpm add -D sass svelte-preprocess
-
sass是编译引擎，负责把.scss转成 CSS -
svelte-preprocess是 Svelte 官方推荐的预处理桥接器，它让<style lang="scss">能被 Svelte 编译器理解 - 别漏掉
-D—— 这俩都是开发时依赖，生产环境不需要
svelte.config.js 中必须配置 preprocess
即使装了依赖，没在 svelte.config.js 里启用 svelte-preprocess，Svelte 依然会忽略 lang="scss"，把它当普通 CSS 处理，变量、嵌套全失效。
正确配置示例（注意导出的是对象，不是函数）：
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
立即学习“前端免费学习笔记（深入）”；
import preprocess from 'svelte-preprocess';
export const config = {
preprocess: preprocess({
scss: {
// 可选：传入 node-sass/dart-sass 的配置，比如 includePaths
}
})
};
- 如果你用的是 SvelteKit，配置文件是
svelte.config.js，不是vite.config.js - 不要写成
preprocess: [preprocess(...)]—— 这是旧版写法，新版会报preprocess is not a function - 如果项目同时用 PostCSS 或 TypeScript，可以合并进同一
preprocess()调用里，不用额外插件
组件内使用 lang="scss" 的实际限制
Svelte 的 scoped CSS 机制和 Sass 嵌套共存时，容易误以为子选择器能穿透作用域 —— 实际上不能。比如：
<style lang="scss">
.container {
color: red;
& .item { // ✅ 编译后是 .container[data-svelte-h-xxx] .item
font-weight: bold;
}
.item { // ⚠️ 编译后是 .container[data-svelte-h-xxx] .item —— 正确，但不是全局 .item
background: blue;
}
}
</style>
-
&是必须的，否则嵌套层级会被 Svelte 自动加上 scope 属性，导致选择器变长但语义不变 - 想影响外部元素？得用
:global(.some-class)，但别滥用，会破坏封装 - 变量、mixin、@import 都可用，但路径是相对于组件文件的，
@import '../vars.scss'要确保路径存在且没被 Vite 的 alias 拦截
常见报错和绕过方式
遇到 File not found 或 Undefined variable 不一定是语法错，大概率是路径或作用域问题。
-
@import失败：检查是否用了绝对路径（如@import '/src/vars.scss'），Vite 默认不解析根路径，改用相对路径或配置alias -
$color: #fff在<style>里定义后，在同组件 JS 中无法访问 —— Sass 变量只在样式层有效，JS 里要用export let color = '#fff' - 热更新失效？关掉 VS Code 的 Live Sass Compiler 插件 —— 它和 svelte-preprocess 冲突，会导致重复编译或文件锁死
真正麻烦的从来不是怎么写 Sass，而是搞清哪一层在解析路径、谁在加 scope、哪个进程在读文件 —— 这些边界模糊的地方，才是调试花时间的地方。
