sass 必须安装且版本 ≥1.70.0，否则 vite 无法编译 scss 并触发 hmr；@import 不支持路径别名，应改用相对路径或配置 includepaths + @use；需通过 server.watch.ignored 显式监听 variables.scss 等依赖文件。
检查 sass 是否已正确安装并启用
Vite 对 SCSS 的 HMR 支持依赖 sass（Dart Sass）运行时编译，不是可选插件——它必须作为 devDependencies 存在且能被 Vite 自动调用。如果只装了 node-sass（已废弃）或压根没装，Vite 会静默回退到“仅解析 import 路径”，不触发编译，自然也没有热更新。
执行以下命令确认：
-
npm list sass或yarn list sass—— 必须有输出，版本建议 ≥ 1.70.0 - 若无输出：
npm install sass -D - 删掉
node_modules/.vite目录后重启npm run dev
避免 @import 路径别名失效导致 HMR 断链
SCSS 文件中写 @import "@/styles/variables.scss"; 看似合理，但 Vite 的 CSS HMR 不处理 CSS/SCSS 层的路径别名解析，@import 是 Sass 引擎执行的，而别名（如 @/）是 Vite 在 JS 模块层注入的。结果就是：文件根本没被加载，改了 variables.scss 也不会触发任何 HMR 日志。
验证方法：在 variables.scss 第一行加 // debug: loaded，保存后看终端是否出现 [vite] hot updated: 日志。没日志 = 没监听到变化。
修复方式二选一：
- 改用相对路径：
@import "../styles/variables.scss";（最稳，无歧义） - 在
vite.config.ts中配置css.preprocessorOptions.sass.includePaths，并改用@use（推荐）：css: { preprocessorOptions: { sass: { includePaths: [path.resolve(__dirname, 'src/styles')], additionalData: '@use "variables" as *;' } } }
确认 @use / @forward 替代 @import 后 HMR 可正常追踪
Dart Sass 已弃用 @import，而 @use 和 @forward 的模块化机制与 Vite 的依赖图更兼容。但前提是：被 @use 的文件必须能被 Vite 的文件监听器直接捕获——也就是它得出现在 includePaths 范围内，且不能是动态拼接路径。
常见陷阱：
-
@use "@/styles/variables"→ ❌ 别名不解析，Sass 找不到文件 -
@use "./variables"（当前目录下不存在）→ ❌ 路径错误，编译失败但 HMR 不报错 -
@use "variables"+includePaths配置正确 → ✅ 可被监听、可热更新
注意：additionalData 是 prepended 到每个 SCSS 文件开头的，所以它引入的变量对所有 SCSS 文件全局生效，无需重复 @use；也正因如此，它对应的文件必须加入 watchFiles（见下一条）。
手动添加 watchFiles 确保变量文件被监听
Vite 默认只监听你显式 import 的 .scss 文件，不会递归扫描 @use 或 @import 引入的依赖文件。这意味着：你改了 variables.scss，但 Vite 根本不知道它被谁用了，也就不会通知浏览器更新。
解决方法是在 vite.config.ts 的 SCSS 配置中显式声明监听范围：
export default defineConfig({
css: {
preprocessorOptions: {
sass: {
includePaths: [path.resolve(__dirname, 'src/styles')],
additionalData: '@use "variables" as *;'
}
}
},
// ? 关键：让 Vite 主动监听 variables.scss
server: {
watch: {
ignored: ['!**/src/styles/**/*.scss']
}
}
})
或者更精准地用插件方式（如使用 vite-plugin-sass-dart），但原生 Vite 推荐用 server.watch.ignored 配合通配符。改完必须重启 dev server —— watch 配置只在启动时注册。
最后提醒：别信“清浏览器缓存就能解决”。SCSS HMR 失效时，控制台连 [vite] hot updated: 都不打印，问题一定出在 Vite 的文件监听链路上，而不是浏览器端。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
