React组件库导入Next.js后样式丢失问题求助

核心原因 #

组件库构建过程中未正确打包TailwindCSS、Ant Design的样式文件，或者Next.js项目未正确引入组件库的样式资源。

具体修复步骤 #

1. 调整Vite配置，确保样式文件输出 #

修改vite.config.js，明确指定CSS输出文件名，确保Rollup正确处理样式资源：

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

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'lw-ds',
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'], // 仅排除React核心依赖，AntD可按需选择是否排除
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
    css: {
      outputFileName: 'style.css', // 强制输出单独的样式文件
    },
    sourcemap: true,
    emptyOutDir: true,
  },
  plugins: [
    react(),
    dts({
      insertTypesEntry: true,
    }),
  ],
});

2. 在组件库入口导入全局样式 #

在src/index.ts中手动导入Tailwind和Ant Design的基础样式，确保构建时这些样式被打包进输出的style.css：

// 导入Tailwind基础样式（需提前配置tailwind.config.js包含src目录）
import './styles/tailwind.css';
// 导入Ant Design全局重置样式（未使用按需加载时添加）
import 'antd/dist/reset.css';

// 导出组件
export { Button } from './components/Button';
// 其他组件导出...

3. Next.js项目中引入组件库样式 #

在Next.js的全局样式文件（如app/globals.css或pages/_app.tsx）中导入组件库打包后的样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

// 导入组件库样式
@import 'lw-ds/dist/style.css';

4. 同步Tailwind配置（若Next.js也用Tailwind） #

如果Next.js项目本身使用TailwindCSS，需在tailwind.config.js中添加组件库的文件路径，让Tailwind扫描组件库的类名：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/lw-ds/**/*.{js,ts,jsx,tsx}", // 加入组件库文件路径
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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