index.html中link能生效是因为它直接注入document样式表队列，作用于整个渲染树；而Flutter Widget默认用Canvas渲染（非DOM），CSS无法直接作用于Container、Text等Widget。
直接在 web/index.html 里加 <link> 是最简单、最可靠的方式，适用于全局样式（比如重置样式、字体、主题色定义），且完全绕过 Flutter 框架限制。
为什么 index.html 中的 link 能生效而 Flutter Widget 里不行
Flutter Web 最终运行在浏览器中，web/index.html 是整个页面的根 HTML 文档。所有通过 <link rel="stylesheet"> 加载的 CSS 都会进入 document 的样式表队列，对整个渲染树（包括 Flutter 渲染的 canvas 或 platform view）生效——前提是这些样式选择器能匹配到目标元素。
注意：Flutter 默认用 Canvas 渲染（非 DOM），所以普通 CSS 无法直接作用于 Container、Text 等 Widget；但如果你用了 HtmlElementView、IFrameElement 或自定义 Web 组件（如 video、canvas、div 封装的 UI），这些 DOM 元素就完全受该 CSS 控制。
在 web/index.html 中添加 link 标签的实操要点
打开 web/index.html，在 <head> 内合适位置（通常在 <meta> 和 <title> 之后、<script> 之前）插入：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="assets/css/custom.css">
然后确保文件路径正确：
-
assets/css/custom.css必须存在于项目根目录下的web/文件夹内（不是lib/或assets/下的 Dart 资源） -
pubspec.yaml中 不需要 声明这个 CSS 文件——因为它是 Web 平台原生加载，不走 Flutter 的 asset bundle 流程 - 路径是相对于
web/目录的，所以href="css/custom.css"才对，href="assets/css/custom.css"是错的（除非你真把文件放进了web/assets/css/）
常见错误和兼容性陷阱
以下问题高频出现，且容易卡住调试：
- 404 报错：检查浏览器 DevTools 的 Network 标签页，确认请求路径是否返回 200。路径写错、文件没放对位置、大小写不一致（Linux/macOS 区分大小写）都会导致失败
- CSS 无效果：确认你的样式是作用于 DOM 元素（比如
div.my-widget），而不是 Flutter Widget 类名（shrink-wrap-render-box这类是内部 class，不稳定且不应依赖） - 样式被覆盖：Flutter Web 默认注入的
style标签或 inline style 权重可能更高，可尝试加!important快速验证，但生产环境应优先调整选择器 specificity - 热重载不刷新 CSS：修改
web/index.html后必须手动刷新浏览器（Ctrl+R / Cmd+R），Flutter 的 hot reload 不监听该文件
真正需要小心的是：CSS 和 Flutter 的边界在哪里。一旦你开始混用 HtmlElementView + 外部 CSS，就得自己管理样式作用域、变量传递、响应式断点同步——这些都不是自动的，也几乎不会报错，只会“看起来没变”。
