必须显式配置 extract: true 或指定路径，否则 CSS 不会生成独立文件；Rollup 默认跳过 .css 文件，插件需明确声明处理后缀，常见原因包括未配 extract、入口无 import、未设 output.assetFileNames、插件顺序错误。
必须显式配置 extract: true 或指定路径，否则 CSS 不会生成独立文件，只可能内联进 JS 或被完全忽略。
为什么 import './Button.css' 后没生成 CSS 文件？
Rollup 默认跳过所有 .css 文件，插件不会自动接管——它只在被明确声明为该后缀的 handler 时才生效。
-
postcss()配置里漏了extract: true或extract: 'dist/index.css'：不写这个，CSS 就不会落地为物理文件，只可能作为字符串内联（且仅限浏览器环境） - 入口 JS 文件里根本没写
import './Button.css'：插件压根不触发处理流程 -
output.assetFileNames没配：生成的 CSS 被塞进dist/xxx.js里，看着像“没打包成功” - 插件顺序错位：比如
rollup-plugin-postcss放在@rollup/plugin-node-resolve之后但没加enforce: 'pre'，导致 CSS 文件未被识别为需处理资源
如何让 CSS 类名哈希、避免全局污染？
靠 modules: true，不是靠文件后缀猜。默认只认 .module.css，但你可以主动控制范围。
- 用
include: ['**/*.module.css', '**/styles.css']把非标准命名也纳入模块化流程 - 别依赖
postcss.config.js自动加载：rollup-plugin-postcss的plugins选项只接受函数数组，比如[require('autoprefixer')()] - 想导出类名 → 配
modules: true+exportLocalsConvention: 'camelCase'，避免生成冗余对象包装 - 只想注入样式不导出 → 改用
import './Dialog.css'（无解构），让插件接管注入逻辑
如何避免 CSS 被当 JS 模块打包进 bundle？
这是体积失控和作用域污染的根源：一个 import 语句，既触发样式注入，又悄悄把整份 CSS 编译成 JS 字符串塞进 bundle。
- 错误写法：
import styles from './Dialog.css'→ 若没配postcss-modules，Rollup 会把它当 JS 模块处理，产物里出现var css = "._overlay_xxx{}"这种拼接字符串 - 正确做法：只用
import './Dialog.css'（无变量），切断 JS 对 CSS 的隐式依赖链 - 绝对不要混用
purifycss和rollup-plugin-postcss：二者抽象层级冲突，大概率报Cannot read property 'replace' of undefined - 检查打包产物里是否含大量 CSS 字符串拼接代码——这是未正确分离 CSS 的典型信号
真正卡住体积和作用域的，从来不是插件选得对不对，而是你有没有切断 JS 模块对 CSS 文件的隐式依赖链。哪怕只多一个解构导入，就可能让整个样式表变成运行时字符串，失去 Tree-Shaking 和加载时机控制能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
