必须替换node-sass为sass（dart sass），因其已废弃、不支持@use/@forward、易与vscode/vite/webpack冲突；迁移需彻底卸载残留、全局及本地安装sass、验证sass --version，并正确配置live sass compiler或tasks.json。
直接装 sass，别碰 node-sass——它已废弃，装了也编译不了 @use 和 @forward，还会和 VSCode、Vite、Webpack 冲突。
确认系统里没有 node-sass 遗留残留
很多项目卡在“编译失败但没报错”，根源是旧版 node-sass 还在 node_modules 或全局里占着位置。执行以下检查：
- 运行
npm list -g node-sass，如果输出版本号，就用npm uninstall -g node-sass干掉 - 进项目目录，运行
npm ls node-sass，有结果就npm rm node-sass - 删掉
node_modules和package-lock.json，再重装依赖
不清理干净，sass 可能被绕过，尤其在 Vue 或 Webpack 项目中。
用 npm 安装 Dart Sass（最通用）
这是跨平台兼容性最好、调试最方便的方式，尤其适合 VSCode 用户和中小型项目：
- 执行
npm install -g sass（全局，供 CLI 使用） - 同时建议加装本地版：
npm install --save-dev sass（供构建工具如 Vite/Webpack 调用） - 安装完立刻验证：
sass --version应返回类似1.77.2的数字，不是4.x（那是 node-sass） - Windows 用户若提示
command not found，重启 VSCode 终端——PATH 变更不会自动生效
别用 yarn global add sass 或 pnpm add -g sass，它们的 bin 路径有时不在系统 PATH 中，VSCode 终端可能找不到命令。
VSCode 中让 .scss 文件保存即编译
Live Sass Compiler 插件看似点开就能用，但默认配置几乎必然出错。关键只改三处：
- 必须设
"liveSassCompile.settings.formats"，例如：[{"format": "expanded", "extensionName": ".css", "savePath": "/css/"}]否则 CSS 会生成在 SCSS 同级目录，容易误提交 -
"liveSassCompile.settings.generateMap"设为true，不然调试时点不到原始 SCSS 行号 - 以
_开头的文件（如_mixins.scss）默认不编译，得手动加进"liveSassCompile.settings.includeItems"，例如：["**/_mixins.scss"]
插件右下角显示 “Watch Sass” 才算启动成功；如果保存没反应，先看右下角编码是否为 UTF-8（不是 UTF-8 with BOM）。
编译命令与常见陷阱
sass CLI 看似简单，但路径、扩展名、watch 模式稍错就静默失败：
- 单文件编译：
sass src/main.scss dist/main.css—— 注意两个路径都得写全，不能只写文件名 - 监听整个目录：
sass --watch src/scss:dist/css—— 冒号前后不能有空格，且目标目录dist/css必须存在 - 别同时跑
sass --watch和 Live Sass Compiler，Windows 下会抢写同一个 .css 文件，内容突然变空或乱码 -
@use语法报错？说明你在用老插件（如旧版 Live Sass Compiler），它内嵌的是阉割版 Dart Sass，不支持模块系统——换用tasks.json调用全局sass，或切到 Vite
真正容易被忽略的，是项目根目录下有没有 .sassrc 或 sass.config.js：如果有，Dart Sass 会优先读取它，而它的 includePaths 或 style 配置可能覆盖 CLI 参数，导致编译结果和预期不符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
