rollup 默认不支持css文件，必须用rollup-plugin-postcss插件处理解析、转换和提取；需配置extract: true生成独立css文件，注意多chunk场景下无法自动分包，且原生hmr不支持css热更新。
Rollup 项目里 import './style.css' 报错：文件未被处理
默认 Rollup 不认识 .css 文件，遇到 import './index.css' 会直接报错：「Cannot find module './index.css'」或「Unknown node type StyleSheet」。这不是配置漏了，而是 Rollup 核心不解析非 JS 资源 —— 它只负责 JS 模块图，CSS 必须靠插件接管。
常见错误现象包括：
-
ParseError: Unexpected token（当 CSS 被当作 JS 解析时） -
Could not resolve './xxx.css'（resolveId钩子没拦截，也没插件处理） - 打包成功但 CSS 完全消失（插件没启用
extract或没调用this.emitFile）
必须用插件桥接，主流选 rollup-plugin-postcss，它能同时解决解析、转换、提取三件事。不要试图用 rollup-plugin-styles 或手写 resolveId + load 钩子来“模拟”——容易漏掉 source map、HMR、依赖追踪等关键链路。
rollup-plugin-postcss 基础配置必须设 extract
只写 postcss() 插件但不配 extract，CSS 会被内联进 JS 字符串（比如 import css from './x.css';），这既不符合常规用法，也失去样式隔离和缓存优势。
正确做法是显式开启提取：
import postcss from 'rollup-plugin-postcss';
export default {
plugins: [
postcss({
extract: true, // ⚠️ 关键！否则 CSS 不生成独立文件
modules: false, // 如需 CSS Modules，才设为 true
autoModules: true, // .module.css 自动启用 modules
minimize: true, // 生产环境自动压缩
extensions: ['.css', '.less', '.scss'] // 显式声明支持的后缀
})
]
};
注意几个易踩点：
-
extract: true时，插件会自动生成bundle.css并注入 HTML 的<link>；若用rollup-plugin-html或手动拼 HTML，需确认是否兼容 -
minimize在 v4+ 版本默认关闭，不手动开就无压缩 -
autoModules是开关，不是替代modules；设modules: true会全局启用，可能破坏第三方 CSS
多入口或多 chunk 场景下 CSS 提取路径容易混乱
当 output 配置多个 format（如 cjs + esm）或使用 code-splitting 动态 import，rollup-plugin-postcss 默认把所有 CSS 合并到一个文件（bundle.css），但实际你可能希望按 chunk 拆分，比如 button.css、dialog.css。
目前该插件原生不支持 per-chunk CSS 提取。可行方案只有两个：
- 接受单文件提取，靠 PostCSS 插件如
postcss-import+@import控制合并粒度 - 改用
rollup-plugin-sass/rollup-plugin-less等单预处理器插件，配合emitFile手动控制每个.scss输出对应.css文件（需在generateBundle钩子里做 filename 映射）
别指望 output.assetFileNames 能接管 CSS 文件名 —— rollup-plugin-postcss 内部用的是自己的命名逻辑，不受 Rollup 全局 asset 配置影响。
开发时热更新（HMR）对 CSS 支持有限
Rollup 官方 HMR（@rollup/plugin-hot）只处理 JS 模块更新，不触发 CSS reload。即使 rollup-plugin-postcss 开了 inject: true，也只是首次插入 <style></style> 标签，后续修改不会刷新。
真实可用的方案只有：
- 搭配
rollup-plugin-livereload：监听.css变更后强制刷新整个页面（简单粗暴） - 用
vite替代 Rollup 开发服务：Vite 底层虽用 Rollup 打包，但开发服务器自带 CSS HMR，且兼容rollup-plugin-postcss配置
想纯 Rollup 实现 CSS 热替换，得自己监听文件变更、读取新内容、用 JS 替换 <style></style> 标签 —— 工程成本高，且无法处理 source map 映射和 scoped 样式失效问题。
真正难的不是“怎么让 CSS 进打包流程”，而是“怎么让它在 dev 和 prod 下行为一致、可预测、不破环构建语义”。很多团队卡在这里，最后发现不如直接切 Vite。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
