自定义React组件库作为依赖安装时CSS未加载问题

你的问题根源出在Rollup的PostCSS配置上——当前设置把所有.css文件都当成CSS Modules处理了，导致styles.css里的Tailwind全局类名（比如border-blue-500、flex这些）被转换成哈希化的类名，而组件代码里还是直接使用原始类名，自然匹配不上，样式也就失效了。而SimpleAlert.module.css本身就是为CSS Modules设计的，所以不受影响。

下面是具体的修复步骤：

1. 修改Rollup的PostCSS配置，区分全局CSS和CSS Modules #

打开rollup.config.js，把postcss插件的配置改成以下两种方式之一：

方式一：自动识别.module.css文件（推荐） #

利用PostCSS的auto选项，让它只对后缀为.module.css的文件启用CSS Modules，其他.css文件作为全局样式处理：

postcss({
  modules: {
    auto: true, // 自动识别.module.css文件
    generateScopedName: "[name]__[local]__[hash:base64:5]" // 可选，自定义模块化类名格式
  },
  plugins: [],
  extensions: [".css"],
  // 可选：如果你想把全局样式提取成单独的CSS文件，而不是内联到JS中，可以设置extract
  // extract: "build/styles.css",
}),

方式二：通过include/exclude指定范围 #

明确指定只有.module.css文件启用CSS Modules，排除styles.css：

postcss({
  modules: true,
  include: /\.module\.css$/, // 仅对.module.css文件启用CSS Modules
  exclude: /styles\.css$/, // 排除全局样式文件
  plugins: [],
  extensions: [".css"],
}),

2. 确保全局样式被正确打包（如果提取成单独文件） #

如果你在PostCSS配置中设置了extract: "build/styles.css"，需要把这个CSS文件加入package.json的files字段，确保发布时能被包含进去：

{
  "files": [ "build", "build/styles.css" ]
}

3. 在使用组件库的项目中引入全局样式（如果提取了单独文件） #

如果选择提取单独CSS文件的方式，你需要在宿主React项目的入口文件（比如index.js）中手动引入这个样式文件：

import 'simple-react-alerts/build/styles.css';

原理说明 #

• CSS Modules的核心是把类名转换成唯一的哈希值，避免样式冲突，但这只适用于组件内部的私有样式。
• 你的styles.css是Tailwind生成的全局样式，里面的类名需要保持原始名称才能被组件中的className正确引用，所以不能被当作CSS Modules处理。
• 修改配置后，styles.css会被作为普通全局样式打包，类名保持不变，就能和组件中的className匹配上了。

验证方法 #

重新构建组件库：

yarn build

然后在宿主项目中重新安装依赖并运行，检查Tailwind的样式是否正常生效。

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