发布Vite-React组件包后模块化SCSS样式不生效求助

问题原因 #

Vite在库模式下默认不会自动处理CSS模块的打包流程，导致模块化SCSS编译后的样式规则没有被注入到最终的npm包产物中——虽然类名已经被正确哈希（比如_container_13ixh_1），但对应的CSS规则并没有被包含在发布的包内。

解决方案 #

修改你的Vite配置，明确启用CSS模块处理，并配置build流程确保样式被正确打包：

1. 更新Vite配置文件

修改vite.config.js，添加CSS模块配置并调整build选项：

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

export default defineConfig({
    build: {
        lib: {
            entry: path.resolve(__dirname, 'index.ts'),
            name: 'leafs-intake-web-temp',
            fileName: (format) => `index.${format}.js`,
        },
        rollupOptions: {
            external: ['react', 'react-dom'],
            output: {
                globals: {
                    react: 'React',
                    'react-dom': 'ReactDOM',
                },
                // 指定CSS资源输出路径
                assetFileNames: 'assets/[name].[hash][extname]',
            },
        },
        sourcemap: true,
        emptyOutDir: true,
        // 开启CSS代码分割，提取单独的CSS文件
        cssCodeSplit: true,
    },
    // 配置CSS模块编译规则
    css: {
        modules: {
            // 和开发环境保持一致的类名生成规则
            generateScopedName: '[local]_[hash:base64:5]',
            // 可选：设置类名转换为小驼峰，方便在组件中使用
            localsConvention: 'camelCaseOnly',
        },
        // 可选：配置SCSS预处理器（比如全局变量）
        preprocessorOptions: {
            scss: {
                // additionalData: `@import "@/styles/variables.scss";`
            }
        }
    },
    plugins: [react(), dts()],
    server: { port: 3000 },
});

2. 确保package.json包含CSS产物

发布前，在package.json的files字段中添加生成的CSS文件路径，确保样式被包含在npm包内：

{
  "files": [
    "dist",
    "dist/assets/*.css"
  ]
}

3. 组件中正确导入模块化SCSS

确认你的组件是通过模块化方式导入SCSS文件：

// 正确导入方式（使用默认导入获取样式对象）
import styles from './YourComponent.module.scss';

// 使用时
<div className={styles.container}>内容</div>

验证步骤 #

1. 重新执行npm run build，检查dist目录下是否生成了对应的CSS文件（比如assets/index.[hash].css）
2. 发布更新后的包到GitHub Packages
3. 在测试项目中安装最新包，查看开发者工具中哈希类名是否有对应的样式规则

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