Vite库模式下React应用样式如何导出并生效？

1. 确认CSS文件的输出与导入 #

Vite库模式不会自动把CSS注入到组件bundle里，得手动处理：

• 检查vite.config.ts的构建配置，确保正确生成独立CSS文件，示例配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [react(), dts({ rollupTypes: true })],
  build: {
    lib: {
      entry: './src/index.ts',
      name: 'MyComponentLib',
      formats: ['es', 'umd'],
      fileName: (format) => `my-component-lib.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          reactDom: 'ReactDOM',
        },
      },
    },
  },
});

• 构建完成后，宿主应用必须手动导入生成的CSS文件，比如在main.tsx或组件使用处：

import 'my-component-lib/dist/my-component-lib.css';

2. 修复CSS Modules类名冲突 #

用module.scss时，类名规则可能和宿主应用冲突，导致样式失效：

• 在vite.config.ts中配置唯一的CSS Modules命名规则：

export default defineConfig({
  // 其他配置不变
  css: {
    modules: {
      generateScopedName: '[name]__[local]___[hash:base64:5]',
    },
  },
});

• 组件内要正确导入并使用CSS Modules：

import styles from './Button.module.scss';

export const Button = () => <button className={styles.btn}>Click Me</button>;

3. 全局CSS的正确打包 #

如果库包含全局CSS，必须在库的入口文件中导入，确保构建时打包到输出的CSS里：

// src/index.ts
import './global.css';
export { Button } from './components/Button';

4. 调整宿主应用的CSS加载顺序 #

宿主应用的全局样式可能覆盖库的样式，导致看起来没生效：

• 把库的CSS导入放在宿主全局样式之前：

// 先导入库的CSS
import 'my-component-lib/dist/my-component-lib.css';
// 再导入宿主的全局样式
import './index.css';

5. 验证package.json的配置 #

确保package.json中包含构建产物，且路径正确：

{
  "files": ["dist"],
  "main": "./dist/my-component-lib.umd.js",
  "module": "./dist/my-component-lib.es.js",
  "types": "./dist/index.d.ts",
  "style": "./dist/my-component-lib.css"
}

配置style字段后，部分构建工具会自动导入CSS，但手动导入更稳妥。

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