<p>gulp-inject往HTML中插入<link>可行，但需满足两个硬条件：CSS文件必须已生成并写入磁盘，且HTML中必须存在规范的注入标记（如<!-- inject:css -->与<!-- endinject -->），否则静默失败。</p>
直接用 gulp-inject 往 HTML 里插 <link> 是可行的，但必须满足两个硬条件：CSS 文件得先生成（不能还在编译中），且 HTML 中得有明确的注入标记（比如 <!-- inject:css -->）。否则它会静默失败，不报错也不生效。
注入前必须确保 CSS 已写入磁盘
gulp-inject 不读取内存流，只读取实际文件系统中的文件。如果你的流程是 src/scss → pipe(sass()) → pipe(inject())，那它根本找不到目标 CSS 文件——因为还没 pipe(gulp.dest()) 写出去。
- 正确顺序必须是：
gulp.src('src/scss/app.scss')→ 编译 →pipe(gulp.dest('dist/css'))→ 再 从'dist/css/**/*.css'读取并注入 - 常见错误：把
inject()放在cleanCSS()或autoprefixer()后面、但仍在dest()前，此时文件尚未落盘 - 如果想避免两次读写，可改用
gulp-useref（它基于 HTML 注释解析并替换路径，不依赖文件落地）
HTML 中必须有标准注入锚点
gulp-inject 默认只识别 <!-- inject:css --> 和 <!-- endinject --> 这一对注释。没有它们，或者写成 <!-- inject css -->（少冒号）、<!-- inject:css --> 后没闭合，都会跳过注入。
- 锚点要放在
<head>内，且不能嵌套在其他注释或模板语法中 - 若需注入多个 CSS 组（如 vendor / app），可用命名锚点：
<!-- inject:css:vendor -->，然后调用inject(gulp.src(...), { name: 'vendor' }) - 注意：注入后生成的
<link>标签默认无rel="stylesheet"，需手动加进starttag配置里，否则浏览器不加载
路径问题常导致 404，别只信相对路径直觉
注入生成的 href 值，是相对于你传给 inject() 的 gulp.src() 路径计算的，不是相对于 HTML 文件位置。比如你用 gulp.src('dist/css/*.css')，它会把 dist/css/app.css 注入为 href="app.css" —— 但如果 HTML 在 dist/index.html，而 CSS 实际在 dist/css/app.css，那路径就错了。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：统一用
gulp.src('dist/css/**/*.css', { base: 'dist' })，这样注入时会保留css/app.css的层级 - 或者用
transform函数手动拼前缀：transform: (filepath) => `<link rel="stylesheet" href="%24%7Bfilepath.replace('dist/',%20'')%7D">` - 开发阶段建议打开浏览器开发者工具的 Network 面板，点开注入的 CSS 链接看是否 404，这是最直接的验证方式
真正容易被忽略的是：注入动作本身不校验目标文件是否存在，也不会提示路径错配。它只是安静地把一堆 <link> 塞进去，然后你刷新页面发现样式没加载——这时候得倒回去查三件事：CSS 是否已写入、HTML 锚点是否规范、注入时的 base 和 transform 是否匹配最终部署结构。
