必须显式启用 extract: true 才能导出 css 文件；rollup 本身不处理 css，import './style.css' 默认不生成任何输出，extract 设为 true 或指定路径才提取独立文件，压缩需通过 postcss.config.js 中的 cssnano 插件实现。
必须显式启用 extract: true 才能导出 CSS 文件
Rollup 本身完全不处理 CSS，import './style.css' 这行代码默认什么都不会生成——既不会注入 <style></style>，也不会写入磁盘。你看到的“没输出 CSS”不是插件坏了，而是根本没触发提取逻辑。
rollup-plugin-postcss 默认只做编译（比如把 .scss 转成 CSS 字符串），不提取、不压缩、不模块化。想导出独立文件，extract 必须设为 true 或指定路径字符串：
-
extract: true→ 输出到与 JS 同目录，文件名自动生成（如bundle.css） -
extract: 'dist/main.css'→ 强制写入指定路径，适合多入口场景 -
extract: false或不配 → CSS 会塞进 JS bundle 里（通常不是你想要的）
压缩必须靠 cssnano，不是插件自带的 minify
很多人在 postcss({ minify: true }) 上卡住：这个选项基本无效，它不走 PostCSS 插件链，也不调用 cssnano。真正压缩要靠 PostCSS 配置文件里的 cssnano 插件。
确保项目已安装：npm install cssnano --save-dev，并在 postcss.config.js 中启用：
module.exports = {
plugins: [
require('autoprefixer'),
require('cssnano')({ preset: 'default' })
]
}
注意：cssnano 必须出现在插件数组里，且不能被 if (process.env.NODE_ENV === 'production') 包裹后漏掉——Rollup 不会自动读取环境变量来开关它。
CSS Modules 和 .module.css 后缀必须匹配
如果你希望类名局部作用域、避免冲突，modules: true 是硬性要求；但更关键的是文件命名和导入方式要对齐：
- 启用
modules: true后，import styles from './Button.css'会失败——因为普通.css文件默认不走模块化流程 - 正确做法是改用
.module.css后缀：import styles from './Button.module.css' - 或者手动配置
modules: { extensions: ['.css', '.module.css'] }，但不推荐，容易混淆
另外，exportLocalsConvention: 'camelCase' 可以让 .module.css 中的 my-button 类变成 styles.myButton，提升 JS 端可读性。
插件顺序和 PostCSS 配置路径不能错位
rollup-plugin-postcss 的行为高度依赖外部 postcss.config.js 是否被正确加载。常见失效点：
- 配置文件放在子目录（如
src/postcss.config.js）→ Rollup 找不到，cssnano不生效 - PostCSS 插件（如
autoprefixer）没装或版本不兼容 → 报错Cannot find module 'autoprefixer'或静默跳过 -
rollup-plugin-postcss放在@rollup/plugin-node-resolve之后 → 某些@import路径解析失败
推荐插件顺序：node-resolve → postcss → commonjs → 其他。所有 PostCSS 相关逻辑（前缀、嵌套、压缩）都必须落在同一个插件实例里，不能拆成两个 postcss() 调用。
最常被忽略的一点：extract 和 modules 是开关，不是可选优化项；一旦漏掉，CSS 就不会落地为文件，后续压缩、哈希、CDN 缓存全无从谈起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
