应直接安装 Dart Sass CLI 并配置 VSCode 插件，禁用已废弃的 node-sass；需全局安装 sass、正确配置 PATH、重启 VSCode，并修改 Live Sass Compiler 的输出路径、sourceMap 和 savePath 项，避免监听 node_modules 和路径冲突。
直接装 sass CLI 并配对 VSCode 插件或任务，别碰 node-sass——它已废弃，不支持 @use，且和现代构建工具冲突频繁。
确认 Dart Sass 已全局可用
VSCode 所有自动编译行为（插件、tasks、npm script）都依赖系统能调用 sass 命令。没装好这一步，后面所有配置都是静默失败。
- 在 VSCode 终端运行
sass --version；若报command not found，说明没装或 PATH 没生效 - 执行
npm install -g sass（别用node-sass）；macOS/Linux 用户注意：pnpm/yarn 全局安装后，需手动把$HOME/.local/share/pnpm或$HOME/.yarn/bin加进$PATH - 安装完必须重启 VSCode，否则终端仍可能找不到命令
Live Sass Compiler 插件必须改的三项配置
插件默认行为几乎无法直接用于真实项目：CSS 输出位置错乱、不生成 map、跳过 partial 文件——全靠手动覆盖。
- 在项目根目录建
.vscode/settings.json，写入"liveSassCompile.settings.formats"，例如：[{"format": "expanded", "extensionName": ".css", "savePath": "/css/"}]，强制输出到/css/目录 - 设
"liveSassCompile.settings.generateMap": true，否则 DevTools 点不到 SCSS 行号 - 删掉
liveSassCompile.settings.savePath（如果误写了），它会覆盖formats里的路径，导致 CSS 写空或乱跑
sass --watch 卡住或输出错乱的常见原因
不是插件坏了，是监听路径或解析逻辑被默认行为拖垮了。尤其项目引入 Bootstrap 5 或大量 @use + @forward 后，递归扫描 node_modules 是主因。
- 别用通配符监听整个
src/scss/目录，改用单文件绑定：sass --watch src/scss/main.scss:dist/css/main.css - 检查
includePaths是否混入了node_modules根目录——这是性能黑洞，会导致每次修改都重解析所有第三方包 - Windows 用户注意路径分隔符：
sass --watch src\scss:dist\css在终端可能解析失败，统一用正斜杠/ - 避免同时开 Live Sass Compiler 和手动跑
sass --watch，两个进程抢写同一个.css文件，Windows 下极易锁死或内容错乱
@use 导入第三方包时编译失败怎么办
错误常表现为 “Undefined variable” 或 “Module not found”，本质是路径未被识别，而非语法写错。
-
@use "bootstrap/scss/functions"这种写法默认失败——Sass 不查node_modules，必须靠构建工具加--load-path=node_modules或配置includePaths - Webpack 用户：在
sass-loader的options.additionalData或includePaths中加node_modules路径 - Vite 用户：在
css.preprocessorOptions.sass.includePaths中添加 - CLI 编译：加参数
--load-path=node_modules，例如sass --load-path=node_modules src/scss/main.scss dist/css/main.css
真正麻烦的不是怎么配，而是不同工具链对 @use 的支持粒度不一致——比如 Bootstrap 5 的 @forward 结构要求你显式 show 函数，而某些 UI 库的变量覆写又必须在 @use 之前定义。这些细节不踩一遍坑，光看文档根本没法推断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
