Rollup本身不处理CSS，必须靠插件介入；错误配置会导致CSS体积增大或重复打包，需配合postcss-modules启用modules:true并规范文件命名与导入方式。
直接结论：Rollup本身不处理CSS，必须靠插件介入；但错误配置反而会让CSS体积更大，甚至重复打包。
rollup-plugin-postcss 必须配合 postcss-modules 才能真正按需提取样式
很多人装了 rollup-plugin-postcss 就以为能自动分离 CSS，结果发现所有组件的样式全塞进一个 styles.css 里——这是因为默认模式下它只是把 import './Button.css' 编译成 JS 字符串插入，没做模块化隔离。
- 必须显式启用
modules: true，否则类名不会哈希、无法作用域隔离，更谈不上 Tree-Shaking - 若使用 CSS Modules，要确保每个组件的 CSS 文件名是
Button.module.css或显式在插件中配置include: ['**/*.module.css'] - 不加
postcss-modules，rollup-plugin-postcss会把所有@import内联展开，导致重复引入同一份基础变量或重置样式
不要让 CSS 被 JS 模块“意外携带”进 bundle
常见错误是写 import styles from './Dialog.css'，然后在 JS 中用 element.className = styles.overlay ——这看似合理，但 Rollup 会把整个 CSS 文件当 JS 模块处理，最终生成带 export default {...} 的 JS 片段，不仅体积翻倍，还破坏了 CSS 的加载时机。
- 改用
import './Dialog.css'（无变量解构），让插件接管注入逻辑 - 如果必须导出类名，用
postcss-modules的generateScopedName配合exportLocalsConvention: 'camelCase'，避免生成冗余对象包装 - 检查打包产物里是否出现类似
var css = "._overlay_xxx{...}"的字符串拼接代码——这是未正确分离 CSS 的典型信号
purifycss 与 rollup-plugin-postcss 不兼容，别混用
purifycss 是基于 HTML/JS AST 分析选择器的工具，而 Rollup 在构建时通常不生成最终 HTML，且 rollup-plugin-postcss 输出的是运行时注入逻辑，二者根本不在同一抽象层级上协作。
立即学习“前端免费学习笔记（深入）”；
- 试图在
rollup.config.js里同时配purifycss和rollup-plugin-postcss，大概率导致 CSS 被清空或报错Cannot read property 'replace' of undefined - 真要删未用样式，应改用
rollup-plugin-css-only+critters（用于提取关键 CSS）或上线后用playwright爬页面再跑uncss - Bootstrap 类库场景下，与其依赖 PurifyCSS，不如直接从源码路径按需 import：比如只用
import 'bootstrap/scss/alert.scss'，配合rollup-plugin-sass编译
真正影响 CSS 体积的不是插件数量，而是你有没有切断「JS 模块对样式文件的隐式依赖链」。一个 import 语句写错位置，就可能让 10 个组件的样式被强制合并进主 bundle。
