Rollup 默认不内联 CSS，需用 rollup-plugin-postcss 配 extract: false 且确保其在 plugins 中位置正确、未被其他插件拦截，并关闭 rollup-plugin-vue 的默认 CSS 处理；该方式仅限浏览器环境生效，SSR 下静默失效。
Rollup 默认不内联 CSS，必须用插件显式控制注入行为；常见做法是用 rollup-plugin-postcss 配 extract: false（或不配 extract），但要注意它只在浏览器环境生效，SSR 场景下会静默失效。
为什么 import './Button.css' 没触发内联注入？
Rollup 本身跳过所有 .css 文件，插件必须被识别为该后缀的 handler 才能介入。静默失败最常因为：
-
postcss()插件没出现在plugins数组里，或位置太靠后被其他插件拦截 - 入口 JS 文件里根本没写
import './Button.css'—— 插件只响应实际 import 的文件，不会扫描目录 - 插件配置了
extract: true或extract: 'dist/index.css'，强制走文件输出路径，覆盖了内联逻辑
如何确保 CSS 真正以内联 style 标签注入？
关键不是“怎么加”，而是“怎么不生成文件 + 让插件接管注入”。实操要点：
- 删掉
extract配置项，或明确设为extract: false（部分版本要求显式声明） - 确认
postcss()在plugins数组中排在rollup-plugin-vue或@rollup/plugin-commonjs之后，避免被提前处理 - 仅限浏览器环境有效：内联依赖
document.head，SSR 构建时该逻辑被跳过，且无报错提示 - 若用
rollup-plugin-vue，需关掉它的默认 CSS 处理：vue({ css: false })，否则和postcss()冲突
内联注入 vs 字符串导入：别混用 import 方式
行为完全取决于你如何写 import 语句，不是插件自动判断：
立即学习“前端免费学习笔记（深入）”；
-
import './Button.css'→ 插件接管，执行注入（前提是没配extract） -
import styles from './Button.css'→ Rollup 当作 JS 模块处理，生成字符串拼接代码如var css = "._btn_abc{}"，这不是内联，是运行时污染 bundle - 想导出类名又想注入样式？不行。二者逻辑冲突：
modules: true会禁用注入，只返回作用域对象；必须二选一
内联注入的隐蔽陷阱
看似简单，但容易忽略三点：
- 开发时看到样式生效 ≠ 构建产物含内联逻辑：检查最终
.js文件里是否含document.createElement('style')片段，没有就说明插件没生效 - 多个组件 import 同一份基础 CSS（如
reset.css），会重复注入多次，无法去重 ——rollup-plugin-postcss不做模块级 dedupe - 如果用了
rollup-plugin-import-css，它确实返回字符串，但不注入、不加前缀、不支持@import展开，和真正内联不是一回事
真正卡住的从来不是“能不能内联”，而是你有没有意识到：内联只是开发期便利手段，一旦要支持 SSR、CDN 缓存、或下游项目自行控制样式加载时机，就必须切回 extract: true + 独立 CSS 文件路径。别让内联成为默认选项，除非你清楚每处 import 都在浏览器里跑。
