import './style.css'未触发内联，因Rollup默认忽略.css文件，需插件主动接管；常见原因包括：rollup-plugin-postcss未设extract: false、rollup-plugin-import-css未在入口显式import、插件顺序错位或缓存残留。
为什么 import './style.css' 没触发内联？
Rollup 默认完全忽略 .css 文件，不经过插件，import 语句会被静默跳过。内联不是默认行为，必须由插件主动接管并配置为字符串注入模式。
常见静默失败原因：
-
rollup-plugin-postcss没配extract: false（默认是false，但若你之前设过extract: true又删了，可能残留缓存） - 用了
rollup-plugin-import-css却没在入口 JS 中写import './style.css'—— 它只响应显式import，不扫描@import - 插件顺序错位：比如
postcss()放在typescript()后面，而 TS 编译器先报错退出，插件根本没执行
用 rollup-plugin-import-css 实现纯内联字符串
这个插件最轻量，适合“只读样式、不导出类名、不生成文件”的场景，比如组件库中几个辅助工具类的快速注入。
它把 CSS 当作字符串加载，结果是：import styles from './Button.css' → styles 是一个包含完整 CSS 文本的字符串变量。
立即学习“前端免费学习笔记（深入）”；
配置要点：
- 安装：
pnpm add -D rollup-plugin-import-css - 在
rollup.config.js中启用：importCss()（无需参数） - 确保入口 JS 有
import './Button.css'，且不要解构或使用export相关语法 - 它不支持
@import展开、PostCSS 处理、CSS Modules 或哈希类名 —— 这些都不是它的职责
示例输出片段：
const css = ".btn { color: blue; }\n.btn:hover { opacity: .8; }";后续需手动调用 document.head.appendChild(...) 注入。
用 rollup-plugin-postcss 配内联 + PostCSS 能力
如果你需要 autoprefixer、嵌套语法、@import 解析或未来可能切到 extract 模式，rollup-plugin-postcss 是更可持续的选择。
关键配置项必须显式写出：
-
extract: false（明确关闭文件落地） -
modules: false（避免意外开启 CSS Modules，否则会尝试导出对象） -
plugins: [require('autoprefixer')()]（PostCSS 插件必须是函数调用形式，不能只写autoprefixer） - 去掉
exportLocalsConvention和generateScopedName（它们只在modules: true下生效）
此时 import './Dialog.css' 仍不会产生变量，样式直接注入；若写 import styles from './Dialog.css'，则会报错或生成空对象 —— 因为没开 modules，插件不提供导出逻辑。
内联 CSS 的体积和作用域风险
内联看似简单，但容易埋下两个隐患：
- 重复打包：多个组件都
import './reset.css'，这份 CSS 就会被多次字符串化进 JS bundle，无法 dedupe - 作用域污染：内联的 CSS 是全局生效的，如果两个组件依赖同名类（如
.container），后者会覆盖前者，且无 warning - Tree-shaking 失效：JS 模块对 CSS 的
import会阻止 Rollup 判断该 CSS 是否被真正使用 —— 即使组件没被引用，CSS 字符串仍进 bundle
真正可控的方案，是让 CSS 走独立文件路径（extract: 'dist/index.css'），再由下游用户决定是 link 还是动态 fetch。内联只应在极小、确定不复用、且无样式冲突风险的场景下使用。
