import './Button.css'未生成独立CSS文件，因Rollup默认忽略.css文件，需正确配置rollup-plugin-postcss的extract: true、modules: true及output.assetFileNames，否则CSS将内联至JS或被丢弃。
为什么 import './Button.css' 没生成独立 CSS 文件
Rollup 默认完全忽略 .css 文件，不报错也不处理——静默跳过。能否输出 CSS 文件，100% 取决于插件是否被正确识别、配置和触发。
三个最常漏掉的点：
-
postcss()配置里没写extract: true或extract: 'dist/index.css'→ CSS 只会内联进 JS（浏览器环境）或直接丢弃 - 入口 JS（如
index.js）里根本没写import './Button.css'→ 插件压根不运行，.css文件等于不存在 -
output.assetFileNames没配 → 生成的 CSS 被塞进dist/bundle.js里，用文本编辑器搜.css才能发现它“藏”在 JS 中
rollup-plugin-postcss 的 extract 和 modules 必须显式开启
rollup-plugin-postcss 不是“开箱即用”的 CSS 提取器；它默认行为是把 CSS 编译后当字符串注入 JS，不是落地为文件。想提取，必须手动告诉它：
-
extract: true：生成同名 CSS 文件（如dist/index.css），路径由output.dir+output.assetFileNames决定 -
modules: true：启用 CSS Modules，类名自动哈希，避免全局污染；不加这个，Button.module.css也不会被模块化 -
exportLocalsConvention: 'camelCase'：让import { buttonPrimary } from './Button.module.css'可用，而不是返回一个带default的对象
错误示例：postcss({ plugins: [require('autoprefixer')()] }) —— 这段代码既不提取、也不模块化，CSS 最终变成 JS 字符串塞进 bundle。
立即学习“前端免费学习笔记（深入）”；
多 JS 输出格式共用一份 CSS 物理文件
组件库通常要输出 esm、cjs、umd 多种格式，但 CSS 不该也输出三份。物理上只应有一份 dist/index.css，所有 JS 入口都引用它。
关键配置项：
-
output.assetFileNames: 'index.css'：强制所有 CSS 输出到同一路径，避免index.esm.css、index.cjs.css等冗余文件 -
postcss({ extract: 'dist/index.css' })：显式指定路径，比extract: true更可控 - JS 文件里统一用
import './Button.css'（无解构），而非import styles from './Button.css'—— 后者会触发 JS 模块化逻辑，导致 CSS 被双重打包
否则你会在产物中看到 var css = "._button_xxx{}" 这类字符串拼接代码，说明 CSS 已经被 JS 模块“劫持”，体积失控且无法 Tree-Shaking。
不要混用 rollup-plugin-import-css 和 rollup-plugin-postcss
这两个插件处理 .css 的方式根本冲突：rollup-plugin-import-css 只做一件事——把 CSS 当纯字符串导入（import styles from './index.css' → styles 是字符串），不支持 extract、不走 PostCSS、不支持模块化。
共存后果：
- 同一
.css文件被两个插件同时捕获 → 构建失败或样式重复注入 - 你本想提取 CSS，却因
import styles from语句被rollup-plugin-import-css拦截，postcss()完全不执行 - SSR 场景下，字符串注入的样式无法服务端渲染出
<style>标签，只能靠客户端补
真正卡住的从来不是插件选得对不对，而是你有没有切断 JS 模块对 CSS 的隐式依赖链：一个 import 语句，既触发样式注入，又悄悄把整份 CSS 编译成 JS 字符串塞进 bundle —— 这才是体积膨胀和作用域污染的根源。
