Rollup默认忽略.css文件，import './Button.css'不生成JS字符串是因为插件未配置为处理该后缀；需用rollup-plugin-import-css实现纯字符串注入，或确保rollup-plugin-postcss正确配置modules与extract。
为什么 import './Button.css' 没让 CSS 变成 JS 字符串？
Rollup 默认完全忽略 .css 文件，不解析、不处理、不报错——静默跳过。插件必须被明确配置为能响应 .css 后缀，且要选对插件策略。rollup-plugin-postcss 默认行为是「生成独立 CSS 文件」或「内联到 HTML」，不是「注入为 JS 字符串」；想走字符串路径，得换插件或改配置。
用 rollup-plugin-import-css 实现纯字符串注入
这是目前最轻量、目的最明确的方案：把 CSS 编译成字符串常量，塞进 JS bundle 里，运行时动态创建 <style></style> 标签插入 。它不走 PostCSS 流程，不支持 modules、autoprefixer 或哈希类名，但正因如此，它不会和 rollup-plugin-postcss 冲突，也不会意外把 CSS 当 JS 模块打包。
- 安装：
npm install rollup-plugin-import-css --save-dev - 配置（在
rollup.config.js的plugins数组中）：import css from 'rollup-plugin-import-css';<br>export default {<br> plugins: [<br> css({<br> inject: true // 默认 true，控制是否自动插入 <style><br> })<br> ]<br>}; - 使用方式必须是
import './Button.css'（无解构），否则插件不触发 - 产物里你会看到类似
const css = "button{color:red}";的字符串定义，而非export default {...}对象
用 rollup-plugin-postcss 强制走字符串路径的坑
有人试图在 postcss() 里配 extract: false 或删掉 extract 选项，指望它退回字符串模式——这行不通。不设 extract，它默认仍会尝试内联到 HTML（仅限浏览器环境），或干脆不产出任何 CSS 资源；更危险的是，若同时写了 import styles from './Button.css'，而没配 modules: true，Rollup 会把整个 CSS 当 JS 模块处理，生成带 export default 的冗余 JS 片段，体积翻倍且破坏样式加载时机。
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
- 绝对不要混用
rollup-plugin-import-css和rollup-plugin-postcss处理同一组.css文件 - 如果用了
rollup-plugin-postcss，又想导出类名，请务必配modules: true+exportLocalsConvention: 'camelCase'，否则得到的是包装对象而非扁平字符串 -
output.assetFileNames必须显式配好，否则生成的 CSS 可能被误塞进.js文件里，看起来像“没打包成功”
真正影响体积和加载行为的，是 import 语句本身
最关键的判断点不在插件选哪个，而在于你写的那一行 import 是什么形式：
立即学习“前端免费学习笔记（深入）”；
-
import './Button.css'→ 插件接管注入逻辑，可走字符串路径 -
import styles from './Button.css'→ Rollup 视为 JS 模块，强制编译为 JS 对象，哪怕你后面根本不用styles -
import './Button.module.css'→ 即使没配modules: true，部分插件也会按模块化流程走，但行为不可控
检查最终打包产物里有没有 var css = "xxx" 或 export default 包裹的样式字符串——这是未切断 JS 模块隐式依赖链的明确信号。只要那行 import 带了解构或默认导入，你就已经把 CSS 绑死在 JS 执行流里了。
