Vite Library Mode CSS导入在SSR项目中报错求助

根源分析 #

错误出在SSR环境（如Remix）中，Node.js的ESM模块系统无法直接解析.css文件的导入——Node默认只识别JS/TS等标准模块类型。你的库构建后产物中仍保留了import './xxx.css'这类语句，导致Node尝试加载CSS文件时抛出扩展名错误。

解决方案 #

方案1：强制CSS内联到JS产物（推荐，无需消费方额外配置） #

修改你的vite.config.ts，用Vite原生配置替代vite-plugin-lib-inject-css，确保所有CSS被打包内联到JS中，不生成单独的.css文件：

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

export default defineConfig({
  plugins: [
    react(),
    dts({ include: ['lib'] }),
    tsconfigPaths(),
  ],
  build: {
    copyPublicDir: false,
    cssCodeSplit: false, // 禁用CSS代码分割，将所有CSS合并内联
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      formats: ['es'],
      fileName: 'main',
    },
    rollupOptions: {
      external: ['react', 'react/jsx-runtime', 'react-dom'],
      output: {
        manualChunks: undefined,
        inlineDynamicImports: true,
      },
    },
  },
});

执行步骤：

1. 卸载vite-plugin-lib-inject-css依赖：npm uninstall vite-plugin-lib-inject-css
2. 重新构建库：npm run build
3. 发布新版本或本地link测试，此时产物中不会有单独的.css文件，也不会保留CSS导入语句，SSR环境就能正常加载。

方案2：保留单独CSS文件（需消费方适配） #

如果必须保留独立的CSS文件，需要在消费该库的Remix项目中配置，让SSR环境正确处理CSS导入：
在Remix的remix.config.js中添加：

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  // 将你的库加入服务端打包列表，让Remix处理其中的CSS
  serverDependenciesToBundle: ['mycrossword'],
};

同时在消费项目中手动导入CSS：

import 'mycrossword/dist/main.css';
import { Crossword } from 'mycrossword';

补充配置优化 #

调整package.json的sideEffects字段，确保CSS文件不会被Tree Shaking误删：

"sideEffects": [
  "*.css",
  "./dist/*.css"
]

验证 #

构建后检查dist/main.js，确认没有import './main.css'这类语句，即可解决SSR环境下的CSS导入错误。

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