必须显式配置extract: true或指定路径，否则css不会生成独立文件而仅内联；启用modules: true并配合generatescopedname才能实现类名哈希与作用域隔离；import './dialog.css'（无解构）可避免css被当作js模块打包。
rollup-plugin-postcss 是当前最主流的选择，但装上就以为能自动处理 CSS，基本等于没配。
为什么 import './Button.css' 后没有生成 CSS 文件？
Rollup 默认跳过所有 .css 文件，插件必须被明确识别为处理该后缀的 handler。常见静默失败原因：
-
postcss()配置没加extract: true或extract: 'dist/index.css'—— 不写这个，CSS 就不会落地为文件，只可能内联进 HTML（且仅限浏览器环境） - 入口 JS 里根本没写
import './Button.css'，插件压根不触发 -
output.assetFileNames没配，导致生成的 CSS 被塞进dist/xxx.js里，看着像“没打包成功”
如何让 CSS 类名哈希、避免全局污染？
靠 modules: true，不是靠文件后缀猜。默认只认 .module.css，但你可以主动控制：
- 显式写
modules: { generateScopedName: '[name]_[local]_[hash:base64:5]' } - 用
include: ['**/*.module.css', '**/styles.css']把非标准命名也纳入模块化流程 - 别依赖
postcss.config.js自动加载——rollup-plugin-postcss的plugins选项只接受函数数组，比如[require('autoprefixer')()]
为什么打包产物里出现 var css = "._overlay_xxx{}" 这种字符串拼接？
这是 CSS 被当成了 JS 模块在运行时拼接，典型信号是用了 import styles from './Dialog.css' 却没配 postcss-modules。正确做法：
- 想导出类名 → 配
modules: true+exportLocalsConvention: 'camelCase'，避免生成冗余对象包装 - 只想注入样式不导出 → 改用
import './Dialog.css'（无解构），让插件接管注入逻辑 - 绝对不要混用
purifycss和rollup-plugin-postcss，二者抽象层级冲突，大概率报Cannot read property 'replace' of undefined
import 语句，既触发了样式注入，又悄悄把整份 CSS 编译成 JS 字符串塞进 bundle。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
