rollup本身不处理css，需通过插件决定css如何被消费；import './button.css'未生成css文件的主因是插件未配置extract或未识别该后缀；rollup-plugin-import-css用于字符串注入但不支持modules和autoprefixer；rollup-plugin-postcss支持css modules、独立文件及自动前缀，需显式配置modules、exportlocalsconvention和postcss插件数组；多js格式应共用一份css物理文件，避免重复输出；隐式双重依赖（注入+字符串化）是体积失控和作用域污染的根源。
Rollup 本身不处理 CSS，所谓“输出多种格式的 CSS 引入文件”，本质是：用不同插件策略，让 CSS 以不同形态进入 JS bundle 或独立文件——不是 Rollup 输出 CSS 格式，而是你决定 CSS 怎么被消费。
为什么 import './Button.css' 没生成 CSS 文件？
Rollup 默认跳过 .css 文件，插件必须被明确识别为该后缀的 handler。静默失败常见原因：
-
postcss()配置里没写extract: true或extract: 'dist/index.css'—— 不写这个，CSS 就不会落地为文件，只可能内联（且仅限浏览器环境） - 入口 JS 里根本没写
import './Button.css'，插件压根不触发 -
output.assetFileNames没配，生成的 CSS 被塞进dist/xxx.js里，看着像“没打包成功”
想把 CSS 当字符串注入 JS？用 rollup-plugin-import-css
适用于运行时动态插入、SSR 注入或构建时拼接样式等场景。它不走 PostCSS 流程，也不支持 modules 或 autoprefixer。
- 安装：
npm install rollup-plugin-import-css --save-dev - 配置：
plugins: [ importCss() ] - 使用：
import styles from './Dialog.css'→styles是纯字符串，无哈希、无作用域 - 注意：它和
rollup-plugin-postcss冲突，不能共存于同一.css文件路径
想同时支持 CSS Modules + 独立文件 + 自动前缀？必须用 rollup-plugin-postcss
这是目前最主流、也最易踩坑的选择。关键不是装上插件，而是切断 JS 模块对 CSS 的隐式双重依赖。
- 启用模块化：
modules: { generateScopedName: '[name]_[local]_[hash:base64:5]' }，别依赖后缀猜，显式控制哪些文件走 modules - 导出类名用：
import styles from './Dialog.css'+exportLocalsConvention: 'camelCase' - 只注入样式不用类名用：
import './Dialog.css'（无解构），避免生成var css = "._overlay_xxx{}"这种字符串拼接 - PostCSS 插件必须传函数数组：
plugins: [ require('autoprefixer')(), require('cssnano')() ]，不能直接塞对象
多格式输出 ≠ 多份 CSS，而是多份 JS 入口如何引用同一份 CSS
Rollup 的 output 数组可生成 UMD/ESM/CJS 多种 JS 格式，但 CSS 只应产出一份物理文件（如 dist/index.css），由各格式 JS 在运行时按需加载或注入。
- 不要为每种 JS 格式配一套 CSS 提取逻辑，那会生成重复文件、破坏缓存
- 确保所有 JS 输出都指向同一个
output.assetFileNames规则，例如：assets/[name]-[hash][extname] - 如果某个格式（如 CJS）需要同步注入 CSS 字符串，得单独用
rollup-plugin-import-css处理，但要隔离路径，避免和 PostCSS 插件冲突
真正卡住的从来不是插件选哪个，而是你有没有意识到：一个 import 语句，既触发样式注入，又悄悄把整份 CSS 编译成 JS 字符串塞进 bundle —— 这种隐式耦合，才是体积失控和作用域污染的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
