rollup默认跳过.css文件，需插件明确处理；未配extract:true、入口无import语句或未设output.assetfilenames均会导致css不生成。
Rollup 本身不处理 CSS，所谓“跨框架通用”，本质是让 CSS 脱离框架运行时逻辑，只作为静态资源输出——必须切断 JS 模块对 CSS 的隐式依赖链。
为什么 import './Button.css' 后没生成 CSS 文件
这是最常遇到的静默失败。Rollup 默认跳过所有 .css 文件，插件只有被明确识别为该后缀的 handler 才会触发。常见原因：
-
rollup-plugin-postcss配置里没写extract: true或extract: 'dist/index.css'，CSS 就不会写入磁盘，只可能内联（且仅限浏览器环境） - 入口 JS 文件里根本没写
import './Button.css'，插件压根不启动 -
output.assetFileNames没配，生成的 CSS 被塞进dist/xxx.js里，看着像“没打包成功”
如何用 rollup-plugin-postcss 输出纯 CSS 文件（非内联、非字符串）
目标是产出一份可被任何框架（Vue/React/Preact/原生 HTML）直接 <link rel="stylesheet"> 引入的 CSS，不绑定 JS 运行时逻辑：
- 必须启用
extract: true，否则 CSS 不落地 - 禁用
modules: true（除非你真需要 CSS Modules），避免生成import styles from './Button.css'这类 JS 导出逻辑 - 搭配
output.assetFileNames: 'assets/[name]-[hash][extname]'，防止 CSS 被误塞进 JS bundle - PostCSS 插件（如
autoprefixer）必须以函数数组形式传入plugins字段，不能直接塞对象：plugins: [require('autoprefixer')()]
如何避免 CSS 被当成 JS 模块打包进 bundle
这是跨框架场景下最容易踩的坑：一个 import './Dialog.css' 语句，可能同时触发样式注入 + 把整份 CSS 编译成 JS 字符串塞进 bundle，造成体积膨胀和作用域污染。
- 绝对不要写
import styles from './Dialog.css'—— 这会强制插件走模块化路径，即使你没配modules: true，某些版本也会 fallback 到字符串拼接模式，产物里出现var css = "._overlay_xxx{}" - 改用无解构导入：
import './Dialog.css'，让插件只接管注入或提取逻辑，不生成 JS 导出对象 - 确认没有混用
rollup-plugin-postcss和rollup-plugin-import-css处理同一组.css文件，二者抽象层级冲突，大概率报Cannot read property 'replace' of undefined
多格式 JS 输出时，CSS 应该怎么组织
Rollup 支持多 output（es、cjs、umd），但 CSS 不应跟着 JS 格式重复输出：
- 所有 JS 格式共用同一份物理 CSS 文件，比如
dist/index.css，避免冗余 - 在
package.json中通过"style": "dist/index.css"声明主样式文件，让下游工具（如 webpack、vite）能自动引入 - 如果组件库需支持按需加载，CSS 文件名必须稳定（靠
[name]而非[hash]），否则构建时无法预测路径
真正卡住“跨框架通用性”的，从来不是插件选得对不对，而是你有没有意识到：只要一个 import 语句同时承担了“样式加载”和“JS 模块依赖”两个职责，它就不再是通用资源，而成了某框架生态下的耦合产物。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
