linaria实现真正零运行时开销的前提是构建阶段完成样式提取且css正确注入页面；必须开启outputcss: true，否则退化为运行时库，vite需显式配置，webpack需minicssextractplugin，生成css须手动引入，动态样式应通过css变量+静态fallback实现。
Linaria 能实现真正零运行时开销，前提是它在构建阶段完成所有样式提取，且生成的 CSS 被正确注入页面——否则 @linaria/react 或 css 函数仍会残留进 bundle，变成普通运行时库。
必须开启 outputCss: true，否则 Linaria 不是零运行时
这是最常被忽略的配置项。Vite 或 Webpack 默认不会把样式写入独立 CSS 文件，而是保留在 JS 中，靠运行时插入 <style></style> 标签。一旦没开 outputCss: true，styled 和 css 就退化为带同步 insertRule 的运行时逻辑，和 @emotion/react 无异。
- Vite 用户需在
linaria({ outputCss: true })中显式声明，否则构建产物里仍含__linaria注入逻辑 - Webpack 用户要配
MiniCssExtractPlugin，否则 CSS 会被内联进 JS chunk，失去分离优势 - 生成的 CSS 文件（如
assets/linaria.css）不会自动<link>，得检查 HTML 是否真加载了它——常见错误是构建出了 CSS，但页面没引用
css 模板字面量只接受编译期可求值表达式
Linaria 的零开销来自静态分析：它在 Babel 阶段扫描 css`...` 和 styled.div`...`，把能确定值的部分直接转成类名和 CSS 规则。任何依赖运行时 props、state 或函数闭包的插值都会导致构建失败或 fallback 到运行时模式。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- ✅ 允许：
css`color: ${theme.colors.primary}`（theme.colors.primary是常量对象或纯函数调用） - ❌ 禁止：
css`color: ${props => props.color}`或css`margin: ${useMemo(() => 8, [])}px` - ⚠️ 动态需求应推到 CSS 变量层：
css`color: var(--button-color, blue)`，再用style={{ '--button-color': props.color }}控制
服务端渲染（SSR）必须两端都走 Linaria 编译
Next.js、Remix 或 Express + React SSR 场景下，如果只在客户端配了 Linaria Babel preset，服务端 @linaria/server.collect() 拿到的是原始类名（如 Button__1a2b3c），无法匹配构建出的 CSS 中的最终类名（如 atm_btn_4x9z），结果就是首屏样式丢失。
- 服务端入口（如
app/layout.tsx或server.js）也得启用@linaria/babel-preset - 确保
collect()接收的是经 Linaria 处理后的 HTML 字符串，不是 raw JSX 渲染结果 - Next.js App Router 用户注意：
app/下的 Server Components 默认不走 Babel，需确认layout.tsx或loading.tsx是否被 preset 覆盖
动态样式别硬扛，用 CSS 变量 + 静态 fallback 组合
Linaria 不支持运行时插值，但业务总要响应 props。强行绕过限制（比如用 className 拼接或条件 class）会破坏原子化和复用性，反而增大 CSS 体积。
- 推荐模式：
const button = css`background-color: var(--bg, #007bff); transition: background-color 0.2s`，再由组件传style={{ '--bg': props.bg }} - 避免在组件内重复定义语义相同但写法不同的原子规则，例如
css`margin: 16px`和css`m: 16px`会被视为两个独立规则，无法合并 - 设计系统级原子应统一导出：
import { p4, textSm } from '@/styles/atoms'，而非每个组件都手写css
真正的零运行时不是“配完插件就完事”，而是构建产物里搜不到 insertRule、createTextNode 或任何样式注入逻辑——打开打包后的 JS 文件，确认只有类名字符串和空对象，才是 Linaria 发挥作用的标志。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
