Rollup默认跳过.css文件，样式不生效主因是插件未被声明为该后缀handler；需确保import语句存在、postcss配置extract:true、禁用解构导入、设置assetFileNames并调整插件顺序。
Rollup 本身不注入 CSS，所谓“注入”是插件行为；你必须选对插件、配对参数、切断 JS 模块隐式依赖链，否则 CSS 要么消失，要么膨胀进 JS bundle。
为什么 import './Button.css' 后样式没生效？
Rollup 默认跳过所有 .css 文件，不会自动识别或处理。插件只有在被明确声明为该后缀的 handler 时才介入——不是“装了就管用”，而是“配对才触发”。
- 入口 JS 文件里没写
import './Button.css'：插件根本不会启动处理流程 -
rollup-plugin-postcss配置里漏了extract: true或extract: 'dist/index.css'：CSS 只会作为字符串内联（且仅限浏览器环境），不会生成物理文件 - 用了
import styles from './Dialog.css'这种解构写法：若未启用modules: true，Rollup 会把它当 JS 模块处理，产出类似var css = "._overlay_xxx{}"的拼接字符串，塞进 JS bundle
应该用 rollup-plugin-postcss 还是 rollup-plugin-import-css？
取决于你要什么：
- 要 CSS Modules、自动加前缀（
autoprefixer）、哈希类名、独立输出文件 → 用rollup-plugin-postcss，并配modules: true和exportLocalsConvention: 'camelCase' - 只要运行时动态插入纯 CSS 字符串（比如 SSR 注入、构建时拼接），且不需要 PostCSS 处理 → 用
rollup-plugin-import-css，但它不支持modules、不走 PostCSS 流程，和postcss插件冲突，不能共存于同一.css路径
常见错误：两个插件同时处理 **/*.css，结果一个报错，一个静默失效。
如何避免 CSS 被打包进 JS bundle？
关键在导入方式和插件配置的配合：
- 只用
import './Dialog.css'（无变量、无解构）→ 让插件接管注入逻辑，不产生 JS 模块引用 - 禁用
modules: false（或不设）时，绝不要import styles from './Dialog.css'，否则 Rollup 会尝试编译成 JS 字符串对象 - 确保
output.assetFileNames已配置，例如assetFileNames: 'dist/[name][extname]'，否则生成的 CSS 可能被塞进dist/xxx.js里，看着像“没打包成功” - 插件顺序很重要：
rollup-plugin-postcss必须在@rollup/plugin-node-resolve之后，但需加enforce: 'pre'，否则 CSS 文件可能未被识别为需处理资源
组件库中 CSS 引用影响 .d.ts 声明文件生成？
是的。Rollup 在生成类型声明（如用 rollup-plugin-dts）时，无法解析或忽略对 .css 的 import，导致 .d.ts 构建失败。
- 解决方案：在
rollup-plugin-dts配置中显式将 CSS 标记为外部依赖，例如external: [/\.css$/] - 同时检查
tsconfig.json中是否启用了"allowSyntheticDefaultImports": true和"moduleResolution": "node"，避免路径别名（如atoms/Text/styles.css）解析失败
真正卡住的从来不是插件能不能装上，而是你有没有在 JS 层切断对 CSS 的隐式双重依赖——既想注入样式，又让 Rollup 把它当模块编译，这种矛盾才是体积失控和类型构建失败的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
