Rollup 需通过 rollup-plugin-postcss 插件处理 CSS，必须显式配置 extract: true 才生成独立 CSS 文件，modules: true 启用 CSS Modules 避免样式冲突，压缩需在 postcss.config.js 中集成 cssnano，且插件顺序、路径匹配与动态加载配合缺一不可。
Rollup 本身不处理 CSS，必须靠插件；直接写 import './style.css' 不会生效，也不会自动提取或压缩。
rollup-plugin-postcss 必须启用 extract 且配 modules
这是最常卡住的一步：默认 rollup-plugin-postcss 只做编译（如把 SCSS 转 CSS），不提取文件也不启用模块化。不显式设 extract: true，CSS 会塞进 JS 里；不设 modules: true，类名就不是局部作用域，容易冲突。
-
extract: true才会生成独立的.css文件；设为字符串（如extract: 'dist/style.css'）可指定路径 -
modules: true启用 CSS Modules，类名自动加 hash，避免全局污染 - 若同时用
postcss-preset-env或autoprefixer，需确保它们在插件链中排在postcss之后 - 注意：开启
modules后，JS 中要通过import styles from './Button.module.css'使用，不能用普通.css
压缩必须接 cssnano，且不能漏掉 postcss 插件链
仅靠 rollup-plugin-postcss 自带的压缩选项（如 minify: true）往往无效或不完整；真正起效的是在 PostCSS 配置里集成 cssnano。
- 在
postcss.config.js中添加cssnano插件，并设preset: ['default']或手动配置（如移除注释、合并规则） - 若用了
postcss-url处理字体或图片 URL，要确认它在cssnano之前，否则 base64 内联可能被误删 - 慎用
cssnano的discardUnused功能——Rollup 不分析 CSS 引用关系，容易误删实际用到的样式 - 生成文件哈希要用
rollup-plugin-postcss的extract: { hash: true }，而不是靠cssnano
按需加载 CSS 需配合 dynamic import + manualChunks
Rollup 的代码分割对 CSS 生效的前提是：CSS 被 JS 模块引用，且该 JS 模块本身被 import() 动态加载。静态 import 的 CSS 会打进主 chunk。
- 把组件和对应样式放在同一文件（如
Modal.js里import './Modal.module.css'），再用import('./Modal.js')触发分割 - 在
output.manualChunks中按路径匹配（如/pages/或/components/）可强制分组，但 CSS 文件名需与 JS chunk 对齐 - 提取出的 CSS 文件名默认跟随 JS chunk 名（如
modal.123abc.css），需确保 HTML 中正确 link 或由插件注入 - 如果用
rollup-plugin-html注入 style 标签，注意它不支持异步 chunk 的 CSS 自动注入，得自己处理
CSS 拆分和压缩的边界很窄：插件顺序错一位、PostCSS 配置漏一个 preset、或者 extract 和 modules 开关没对齐，都会导致样式丢失或未压缩。别信“开个开关就完事”，每个参数都得验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
