使用Rollup.js构建React插件时CSS Modules及打包问题求助

一、CSS Modules错误修复 #

你的代码里存在类名不匹配的问题：

• CSS文件中定义的类是.backgroundDiv（驼峰命名）
• JSX中却用了classes.background-div（短横线命名）

CSS Modules会自动将CSS中的短横线类名转为驼峰，反之如果CSS是驼峰，JS里也必须用驼峰访问。两种修正方式二选一：

1. 修正JSX中的类名：

// State.jsx
<div className={classes.backgroundDiv}>

2. 或者修改CSS类名为短横线格式：

/* State.module.css */
.background-div{
    background-color: blue;
    color: white;
}

此时JSX里可以用classes.background-div或者classes['background-div']访问。

二、PostCSS配置正确性分析 #

当前配置里的modules: true是正确的，但extract: true是导致需要单独引入CSS的核心原因——这个选项会强制把CSS从JS中提取成独立文件。如果要实现JS与CSS一体化打包，必须调整这个配置。

三、JS与CSS一体化打包实现 #

修改rollup.config.js中的postcss配置，关闭单独提取并开启自动注入：

// rollup.config.js
postcss({
    modules: true,
    extract: false, // 关闭单独提取，将CSS打包进JS文件
    inject: true, // 自动将CSS注入到页面的style标签中生效
}),

这样打包后的bundle.js会包含所有CSS内容，宿主应用引入组件时，CSS会自动生效，无需再单独引入CSS文件。

如果担心样式冲突，还可以自定义CSS Modules的类名格式：

postcss({
    modules: {
        localIdentName: '[name]__[local]--[hash:base64:5]',
    },
    extract: false,
    inject: true,
}),

这个配置会生成带哈希的唯一类名，避免不同组件的样式互相干扰。

额外操作提示 #

本地使用插件无需发布到npm，直接用npm link实现本地安装：

• 在插件的dist目录下执行npm link
• 在宿主应用目录下执行npm link [你的插件名称]

内容的提问来源于stack exchange，提问作者Madpop