最可靠方式是在web/index.html中用<link rel="stylesheet">引入CSS，路径须相对于web/目录，避免@import或JS动态注入，防止FOUC和DOM竞争，注意CSS全局作用域与Flutter样式的冲突。
直接在 web/index.html 中添加 <link rel="stylesheet"> 是最可靠的方式
Flutter Web 本质是编译为 HTML+JS 的单页应用，web/index.html 是唯一被浏览器直接加载的 HTML 入口。所有标准 Web 方式引入 CSS 都在这里生效，且优先级高于 Dart 层任何样式覆盖。别试图绕过它去“Flutter 化”外部 CSS —— 那只会增加复杂度、丢失媒体查询和伪类支持。
href 路径必须是相对于 web/ 目录的静态路径
Flutter Web 构建后，资源服务根目录就是 web/ 文件夹。因此：
-
href="styles.css"→ 要求文件在web/styles.css -
href="css/app.css"→ 要求文件在web/css/app.css -
href="/assets/styles.css"❌ 错误：Dart 的assets/是打包进flutter_service_worker.js或通过rootBundle加载的，不暴露为 HTTP 路径；浏览器无法访问/assets/ -
href="packages/my_app/assets/styles.css"❌ 错误：Flutter Web 不支持该路径映射，会 404
避免在 <head> 中使用 @import 或动态 JS 注入
虽然技术上可行，但会破坏样式加载时序，导致 FOUC（Flash of Unstyled Content）或与 Flutter 渲染竞争 DOM 控制权：
-
@import在 CSS 内部加载，阻塞渲染且无加载回调，无法感知是否就绪 - 用
evalJavascript注入<link>依赖 WebView 插件，在纯 Flutter Web（非 WebView）中不适用 - Flutter 自己的
Htmlwidget（如flutter_html）只处理内联<style>或字符串 CSS，不解析外部href - 真正需要外部 CSS 的场景（比如全局重置、字体定义、第三方 UI 库），必须走
index.html的<link>
注意 CSS 作用域和命名冲突
注入到 index.html 的 CSS 默认作用于整个 document，会穿透进 Flutter 渲染的 Shadow DOM（如果启用）或影响 CanvasKit 渲染的 DOM 节点（如 <flt-glass-pane>）。常见问题包括：
立即学习“前端免费学习笔记（深入）”；
-
body { margin: 0 }被覆盖 → 导致页面整体偏移 -
button { appearance: none }影响 FlutterElevatedButton的默认边框行为 - 自定义字体未声明
font-display: swap→ 首屏文字闪白 - 媒体查询（
@media (prefers-color-scheme: dark)）需确保与 FlutterBrightness主题同步，否则视觉割裂
关键点在于：外部 CSS 和 Flutter Widget 样式不是同一套系统，它们共存于同一个 DOM，但无自动协调机制。修改前务必检查 DevTools 中实际生效的 computed styles，而不是只看 CSS 规则是否加载成功。
