库项目应单独导出CSS文件，仅极少数轻量场景才考虑注入JS；因注入会导致无法preload、JS体积膨胀、SSR无法提取critical CSS，并丧失@import展开、modules、autoprefixer等工程能力。
直接结论：不是“注入还是导出”的二选一，而是由使用场景决定——库项目中绝大多数情况应单独导出 CSS 文件，仅在极少数轻量、无样式复用、纯 runtime 注入需求时才考虑注入 JS。
为什么库项目不该把 CSS 注入 JS？
注入 JS 意味着 CSS 被编译成字符串常量（如 var css = "._btn_abc{color:red}"），塞进 JS bundle 里。这带来三个硬伤：
- 无法被下游用户 link 或 preload，丢失资源加载控制权
- JS bundle 体积不可控增长，尤其当多个组件 import 同一份基础样式时，会重复打包
- SSR 场景下无法提取 critical CSS，服务端渲染的 HTML 缺少初始样式
更关键的是：rollup-plugin-import-css 这类注入插件不支持 @import 展开、modules、autoprefixer，等于主动放弃样式工程能力。
如何正确配置 rollup-plugin-postcss 单独输出 CSS？
核心就三点：显式 extract、配对 assetFileNames、确保入口有 import。
-
extract: 'dist/index.css'或extract: true—— 不写这个，CSS 就不会落地为文件 -
output.assetFileNames: 'assets/[name]-[hash][extname]'—— 避免生成的 CSS 被误塞进dist/index.js里 - 入口 JS（如
src/index.js）里必须有import './styles/index.css'，否则插件不触发
示例配置片段：
import postcss from 'rollup-plugin-postcss'
export default {
plugins: [
postcss({
extract: 'dist/index.css',
modules: true,
plugins: [require('autoprefixer')(), require('cssnano')()]
})
]
}
什么时候真需要把 CSS 注入 JS？
只适用于以下明确场景：
- 组件极其简单（比如一个带内联样式的
Spinner），且确定永远不会被复用或定制 - 构建产物必须是单个 JS 文件（如 legacy UMD 插件，不允许额外 HTTP 请求）
- 样式完全静态、无变量、无媒体查询、不需 SSR 支持
此时可用 rollup-plugin-import-css，但要注意它和 rollup-plugin-postcss 冲突——不能共存于同一 .css 路径。一旦你用了 import styles from './Button.css'，就已默认启用注入路径，再配 postcss() 只会让构建失败或产出两份样式。
多 JS 格式共用一份 CSS 的关键点
Rollup 的 output 数组可同时生成 es、cjs、umd 多种格式，但 CSS 必须只输出一份物理文件（如 dist/index.css），由各格式 JS 在运行时按需加载或注入。
- 不要为每种 JS 格式配一个
postcss({ extract: `dist/index.${format}.css` })—— 这会生成三份重复 CSS - 所有 JS 入口应统一 import 同一个 CSS 路径，让插件自动复用已处理结果
- 检查产物目录：若看到
dist/index.css和dist/index.umd.js、dist/index.es.js并存，且 JS 里没有大段css字符串，说明配置成功
真正卡住的从来不是插件选哪个，而是你有没有意识到：库项目的 CSS 不是“附带产物”，而是需要被下游明确消费的一等公民资源。把它塞进 JS，等于主动交出控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
