使用Vite编译TSX公共库时如何实现CSS注入？

一、补全库模式核心配置 #

Vite构建公共库必须明确声明build.lib配置，否则插件无法识别库构建场景，导致CSS注入逻辑不生效。修改你的vite.config.ts：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [
    react(),
    cssInjectedByJsPlugin(),
    dts({ insertTypesEntry: true }),
  ],
  build: {
    lib: {
      entry: 'src/index.ts', // 替换为你的库实际入口文件
      name: 'YourLibrary', // 可选：全局变量名，用于UMD格式
      formats: ['es', 'umd'], // 按需设置输出格式
      fileName: (format) => `your-library.${format}.js`,
    },
    rollupOptions: {
      // 排除React等外部依赖，避免打包进库（若需用户自行提供依赖）
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

二、适配插件的库模式参数 #

针对库构建场景，可调整cssInjectedByJsPlugin的注入逻辑，确保CSS能在浏览器环境正确插入：

cssInjectedByJsPlugin({
  injectCodeFunction: (cssCode) => `
    if (typeof document !== 'undefined') {
      const style = document.createElement('style');
      style.innerHTML = ${JSON.stringify(cssCode)};
      document.head.appendChild(style);
    }
  `,
  injectCodeOnlyOnce: true, // 避免重复注入样式
})

三、确认组件内CSS导入逻辑 #

确保每个TSX组件都正确引入对应CSS文件，插件只会打包组件内显式导入的样式：

// 示例组件
import './YourComponent.css';

export default function YourComponent() {
  return <div className="custom-class">内容</div>;
}

四、排查其他潜在问题 #

• 版本兼容性：执行npm update vite-plugin-css-injected-by-js，确保插件适配Vite 4.3.5版本；
• 清理缓存：删除dist目录和node_modules/.vite缓存后重新构建；
• 验证产物：打开dist目录下的JS文件，搜索是否包含CSS注入代码，确认插件是否生效。

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