基于React+TS+CSS模块的UI库Rollup样式导出失败问题

本地Storybook能正常加载样式是因为它自带了CSS模块处理能力，但Rollup打包时的配置存在两个核心问题：

1. 你使用了extract: true将样式提取为单独文件，但没有确保该文件被包含在发布包中，也没有让用户能正确加载它；
2. 组件库入口未关联提取的样式文件，导致用户安装后样式自动缺失。

根据你的需求选择以下两种方案之一：

方案1：提取独立CSS文件（适合需要用户手动控制样式加载的场景） #

修改Rollup的postcss配置 #

明确指定样式输出路径，确保生成的CSS文件在dist目录下：

postcss({
  modules: true,
  extensions: ['.css', '.scss'],
  use: ['sass'],
  extract: 'dist/styles.css', // 明确输出路径
  minimize: true, // 可选：压缩CSS文件
})

配置package.json #

确保发布包包含dist目录，并正确声明入口：

{
  "main": "dist/index.js",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ]
}

提示用户加载样式 #

在组件库的README中说明需要手动导入样式：

// 用户项目中
import 'your-library-name/dist/styles.css';
import { Button } from 'your-library-name';

方案2：将样式注入JS（无需用户手动导入，自动加载） #

如果希望用户导入组件时自动加载样式，修改postcss配置取消提取：

postcss({
  modules: true,
  extensions: ['.css', '.scss'],
  use: ['sass'],
  extract: false, // 关闭提取，将样式注入JS
  inject: true, // 自动将样式注入到页面head中
  minimize: true,
})

额外检查项 #

1. TypeScript配置：确保TS支持CSS模块，在src目录下创建types/css.d.ts：

declare module '*.module.css' {
  const classes: Record<string, string>;
  export default classes;
}

declare module '*.module.scss' {
  const classes: Record<string, string>;
  export default classes;
}

并在tsconfig.json中包含该类型文件：

"include": ["src/**/*", "src/types/**/*"]

2. dts插件路径：检查dist/cjs/types/src/index.d.ts是否是TypeScript编译后的正确类型入口，如果tsconfig的outDir是dist，可能需要调整为dist/src/index.d.ts。

1. 执行npm run build打包组件库；
2. 在本地另一个React项目中通过npm install ../your-library-path安装测试；
3. 导入组件并检查样式是否正常加载。

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