import './button.css' 后未生成 css 文件，因 rollup 默认跳过 .css 文件，需插件明确处理；常见原因：未配置 extract: true 或 extract 路径、入口无 import 语句、未设置 output.assetfilenames。
为什么 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要不要用 rollup-plugin-import-css？
它只做一件事：把 CSS 当字符串导入，比如 import styles from './index.css' → styles 是字符串。但它不生成独立 CSS 文件，也不支持 modules、extract、@import 展开或 PostCSS 处理。
- 适合极简场景：组件库中某几个小样式需要 runtime 注入，且不需要作用域隔离
- 不适合 Library 打包：无法产出 .css 文件供下游直接 link，也无法 Tree-Shaking
- 真正卡住体积和作用域的，从来不是插件选得对不对，而是你有没有切断 JS 模块对 CSS 文件的隐式依赖链——比如一个 import 语句，既触发了样式注入，又悄悄把整份 CSS 编译成 JS 字符串塞进 bundle。
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要不要用 rollup-plugin-import-css？
它只做一件事：把 CSS 当字符串导入，比如 import styles from './index.css' → styles 是字符串。但它不生成独立 CSS 文件，也不支持 modules、extract、@import 展开或 PostCSS 处理。
- 适合极简场景：组件库中某几个小样式需要 runtime 注入，且不需要作用域隔离
- 不适合 Library 打包：无法产出 .css 文件供下游直接 link，也无法 Tree-Shaking
- 真正卡住体积和作用域的，从来不是插件选得对不对，而是你有没有切断 JS 模块对 CSS 文件的隐式依赖链——比如一个 import 语句，既触发了样式注入，又悄悄把整份 CSS 编译成 JS 字符串塞进 bundle。
rollup-plugin-import-css？
它只做一件事：把 CSS 当字符串导入，比如 import styles from './index.css' → styles 是字符串。但它不生成独立 CSS 文件，也不支持 modules、extract、@import 展开或 PostCSS 处理。
- 适合极简场景：组件库中某几个小样式需要 runtime 注入，且不需要作用域隔离
- 不适合 Library 打包：无法产出 .css 文件供下游直接 link，也无法 Tree-Shaking
- 真正卡住体积和作用域的，从来不是插件选得对不对，而是你有没有切断 JS 模块对 CSS 文件的隐式依赖链——比如一个 import 语句，既触发了样式注入，又悄悄把整份 CSS 编译成 JS 字符串塞进 bundle。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
