grunt 中 sass 编译与 css 合并必须分两步：先用 sass 任务生成独立 .css 文件，再用 concat 合并；因 sass 插件仅支持编译不支持聚合，多入口指向同一 dest 会导致覆盖而非合并。
Grunt 能可靠完成 Sass 编译 + CSS 合并，但必须分两步走：先用 sass 任务生成 .css 文件，再用 concat 任务合并它们；不能指望单个插件同时干这两件事。
为什么不能只用 sass 插件合并多个入口？
grunt-contrib-sass 的设计目标是「编译」，不是「聚合」。它支持多文件输入，但每个 .scss 入口都会独立输出一个同名 .css 文件（除非你手动指定单一输出路径）。如果你把多个 .scss 都指向同一个 dest，后编译的会直接覆盖前一个——这不是合并，是覆盖。
- 错误写法：
files: { 'dist/css/all.css': ['src/scss/a.scss', 'src/scss/b.scss'] }→ 只有b.scss的内容留在all.css中 - 正确路径：先编译出
a.css、b.css等中间文件，再交给concat处理 - 注意
sass的expand模式：设为true时，cwd和src必须配对使用，否则路径解析会出错
配置 sass 和 concat 的关键参数差异
两个任务看似都是“读文件→写文件”，但参数语义完全不同，混用就会白忙活。
-
sass.dist.files接收对象或数组：对象形式适合单入口（如{'dist/css/main.css': 'src/scss/main.scss'}），数组形式适合多入口批量编译（需配合expand: true） -
concat.dist.files只接受对象：键是目标文件路径，值是源文件路径数组（如{'dist/css/bundle.css': ['dist/css/a.css', 'dist/css/b.css']}） -
sass的ext参数仅在expand: true时生效，用于重写输出扩展名；concat没有这个参数，它不改内容，只拼接 - 别漏掉
concat的banner选项——加个注释头能快速识别这是构建产物，不是手写的
常见报错：Warning: Unable to read "xxx.css" file (Error code: ENOENT)
这是最典型的时序问题：你在 concat 运行时，sass 还没把 .css 文件生成出来。Grunt 不自动推导任务依赖，必须显式声明执行顺序。
- 错误做法：单独运行
grunt concat→ 报错，因为没先跑sass - 正确做法：注册复合任务，例如
grunt.registerTask('build', ['sass', 'concat']); - 开发时想边改边看？把
watch的tasks设为['sass', 'concat']，而不是只写['sass'] - 如果用了
autoprefixer或cssmin，它们也得排在concat后面——顺序错了，压缩的可能是未加前缀的原始 CSS
实际项目中容易被忽略的路径细节
Grunt 对路径很敏感，尤其在 Windows 和 macOS 之间协作时，/ 和 混用、相对路径起点不一致，会导致本地能跑、CI 上失败。
- 统一用正斜杠
/：即使在 Windows 上，Node.js 也认'src/scss/main.scss'，别写'src\scss\main.scss' -
cwd是相对于 Gruntfile.js 所在目录的，不是当前命令行路径；建议所有路径都以项目根为基准，避免用../ - 合并前检查
concat的src数组里每个路径是否真实存在——Grunt 不报错，只是静默跳过缺失文件，结果 CSS 少了一块却很难察觉 - 如果 Sass 里用了
@import引入 partial（如_mixins.scss），确保这些文件名以_开头，否则sass插件会尝试单独编译它们，生成空的.css文件干扰后续合并
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
