remix中不能直接import css，因esbuild将其视为普通模块，不生成link标签、不参与路由生命周期，导致服务端无样式、fouc、样式污染及bundle膨胀；必须通过links函数显式声明。
links 函数是唯一可靠的方式，直接 import './route.css' 会导致 FOUC、服务端无样式、样式污染或 bundle 膨胀。
为什么不能用 import './xxx.css'
Remix 的构建系统（esbuild）把 CSS import 当作普通模块处理，不会生成 <link rel="stylesheet"> 标签，也不参与路由生命周期。结果是：
- 服务端渲染时样式完全缺失，HTML 中没有对应
<link> - 客户端 hydration 后才加载 CSS，出现明显闪屏（FOUC）
- CSS 被打进主 bundle，失去按路由拆分能力
- 多个路由
import同一个文件，样式会全局生效，无法随路由卸载
如何正确导出 links 函数
每个路由文件（如 app/routes/admin.tsx）需显式导出 links，返回 LinkDescriptor 数组。路径必须是相对于 app/ 的有效模块路径（~/ 指向 app/）。
示例：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
import adminStylesHref from '~/styles/admin.css';
export const links: LinksFunction = () => [
{ rel: 'stylesheet', href: adminStylesHref },
];
-
adminStylesHref是构建时解析的字符串 URL，不是原始路径字符串 - 支持条件加载：比如加
media: 'screen and (min-width: 768px)' - 支持预加载：
{ rel: 'prefetch', as: 'style', href: adminStylesHref }
嵌套路由中样式如何隔离与复用
父路由和子路由的 links 会**合并注入**到 ，顺序是父 → 子。这意味着：
- 父路由可提供基础布局样式（如
DashboardLayout.css） - 子路由可覆盖或增强，比如
app/routes/dashboard/reports/monthly.tsx加载专属图表样式 - 若需彻底隔离，避免子路由继承父样式，就得在 CSS 里用 scoped class 或属性选择器（如
[data-route="monthly"]） - 不要在子路由里重复引入父路由已声明的样式，否则可能触发两次下载
全局样式与路由样式共存时的注意事项
root.tsx 中的 links 始终生效，它和当前路由的 links 是叠加关系。容易被忽略的关键点：
-
root.tsx里用import globalStylesHref from '~/styles/global.css'是安全的，但别在这里import某个路由专用 CSS - 如果某路由需要禁用全局样式（极少见），只能靠 CSS 层叠或 JS 动态移除
<link>，Remix 不提供“排除”机制 - Tailwind 用户注意：
@tailwind base必须在全局 CSS 中，不能拆到路由级；工具类（components/utilities）也建议全局引入，否则开发时热更新可能失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
