正确做法是使用sass --watch src/scss:dist/css目录映射语法批量编译，需加--load-path=node_modules支持@import "bootstrap/scss/bootstrap"，并用--source-map--embed-src启用内联源码映射。
直接用 sass --watch 编译整个目录，别手动列每个文件
批量编译不是靠写一堆 sass src/a.scss dist/a.css 命令，而是用目录映射语法：sass --watch src/scss:dist/css。它会监听 src/scss 下所有 .scss 文件（不含 _ 开头的 partial），自动编译到 dist/css 对应路径。比如 src/scss/components/_button.scss 不编译，但 src/scss/main.scss 会生成 dist/css/main.css。
常见错误是只输 sass --watch src/scss —— 这会报错 No output path specified，因为 CLI 不接受单目录输入，必须带冒号分隔的输出路径。
-
sass --watch src/scss:dist/css是最简可用形式 - 想保留嵌套结构？确保
dist/css目录存在，CLI 不会自动创建父级 - 不希望编译
_开头的文件？不用管，这是 Dart Sass 默认行为，无需额外过滤
sass --load-path=node_modules 才能正确 @import "bootstrap/scss/bootstrap"
如果你的 main.scss 里写了 @import "bootstrap/scss/bootstrap"; 却报 File to import not found，问题不在 Bootstrap 装没装，而在 Sass 加载器找不到 node_modules。Dart Sass CLI 默认不查 node_modules，必须显式加 --load-path 参数。
正确命令是：sass --load-path=node_modules --watch src/scss:dist/css。注意顺序：--load-path 必须放在 --watch 前面，否则会被忽略。
- 多个路径？用逗号分隔：
--load-path=node_modules,src/assets/scss - Windows 用户注意路径分隔符仍是正斜杠，
--load-path=node_modules有效，--load-path=node_modules\可能失败 - 别用
~bootstrap/...—— 这是 webpacksass-loader的语法，CLI 不识别
source map 默认不生成，调试时找不到 SCSS 行号
默认运行 sass --watch src/scss:dist/css 不会生成 .css.map 文件，DevTools 里看到的全是压缩后的 CSS 行，没法定位原始 SCSS。必须加 --source-map 参数，且推荐搭配 --embed-src 把源码内联进去，避免部署时漏传 map 文件。
完整命令：sass --source-map --embed-src --load-path=node_modules --watch src/scss:dist/css。注意参数顺序无关紧要，但 --source-map 和 --embed-src 必须同时出现才生效。
- 只加
--source-map不加--embed-src？会生成独立.css.map文件，需确保服务器能返回它 - 生产环境别开
--source-map—— 它会让编译慢 40% 以上 - VSCode 插件里设
generateMap: true是另一套逻辑，和 CLI 无关
@use 语法在 CLI 下完全支持，但 partial 文件不能直接编译
CLI 支持 @use、@forward 全套模块语法，不需要降级回 @import。但一个关键限制是：_variables.scss 这类以 _ 开头的文件，CLI 永远不会把它当作入口去编译——哪怕你手动执行 sass src/scss/_variables.scss dist/css/_variables.css，也会报错 Input file _variables.scss is a partial and cannot be compiled。
正确做法是只把真正需要输出 CSS 的文件（如 main.scss、theme.scss）放在入口目录，其余全部用 @use 引入。CLI 只负责编译“非 partial”文件，模块解析由 Dart Sass 内部完成。
- 想验证
@use是否生效？在main.scss里写@use "sass:math";，编译后看 CSS 是否正常输出，无报错即成功 - 别在
additionalData或构建配置里对每个组件重复@use—— 这会破坏模块缓存，让编译变慢 - 如果项目里混用了
@import和@use，CLI 仍能跑，但无法享受模块缓存提速
--load-path 解决路径问题，--source-map 解决调试问题，目录映射语法解决批量问题。其他参数都是锦上添花，先跑通这三项，再谈优化。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
