scss @import 依赖链断裂是主因：路径含变量、别名或嵌套过深导致静态分析失败，vite/webpack无法构建完整依赖图，hmr监听失效；改用@use可提升稳定性。

SCSS @import 的依赖链断裂是主因 Vite 和 Webpack 的 CSS HMR 都依赖静态分析 @import 路径来构建文件依赖图。但 SCSS 的 @import 不是 ES 模块导入，它在编译期拼接内容，运行时无模块 ID；工具只能靠字符串匹配识别被导入文件——一旦路径含变量、计算值或别名（如 @import '@/styles/_vars.scss';），解析就失败，后续文件变更不会触发上游更新。

• @import 中用了 @/ 别名 → Vite 默认不解析，HMR 监听失效
• 多层嵌套 @import（A.scss → B.scss → C.scss）→ 工具通常只监听一级，改 C.scss 无反应
• 使用了动态路径（@import './themes/' + $theme + '.scss';）→ 完全无法静态分析，HMR 彻底失能

Live Sass Compiler 插件不监听子文件是常见盲区 VS Code 的 Live Sass Compiler 默认只监听“保存的 .scss 文件”，对它 @import 进来的 partials（如 _mixins.scss、_breakpoints.scss）完全无感知。你改了 _vars.scss，控制台没日志、生成的 CSS 时间戳不变，就是这个原因。

• 必须手动在 settings.json 中配置 liveSassCompile.settings.includeItems，显式列出所有 partials 路径
• savePath 必须与 HTML 中 <link href="..."> 的路径严格一致，否则浏览器加载的仍是旧 CSS
• 插件生成的 .css 文件若未被 HTML 直接引用（比如你引用的是源 .scss），热更新只是空转

Webpack + sass-loader 的 HMR 需要 loader 级联动 仅靠 sass-loader 编译 SCSS 不足以激活样式热更；它必须和 style-loader 协同工作：前者把 SCSS 编译成 CSS 字符串，后者负责将 CSS 注入 DOM 并响应 HMR 更新。

• 若配置中漏掉 style-loader，或误用 mini-css-extract-plugin（开发环境禁用！），HMR 会静默退化为整页刷新
• Webpack 5+ 推荐设 injectType: "styleTag"，避免 singleton 模式下旧样式残留
• sass-loader 的 additionalData 选项（如注入全局变量）若含语法错误，会导致整个 SCSS 模块编译失败，HMR 链直接中断

Vite 下 @use 替代 @import 更可靠@use 是 Sass 官方推荐的现代导入方式，它有明确的模块作用域和静态可分析性，Vite 能准确追踪依赖。相比脆弱的 @import，@use 在 HMR 场景下稳定性高得多。

• 把 @import 'vars'; 改成 @use '@/styles/vars' as *;（需配 css.preprocessOptions.scss.additionalData）
• @use 不支持通配符导入时，可用 @forward 统一出口，保持入口扁平
• 注意：Vite 4.3+ 才完整支持 @use 路径别名解析，旧版本仍需改用相对路径

Vite 的 CSS HMR 表面开箱即用，但实际依赖路径的静态可判定性；任何让工具“猜不到文件关系”的写法，都会让热更新在某个深夜突然失效，而且毫无提示。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！