部署React TypeScript+Vite项目时，Rollup无法解析intro.js/introjs.css导入

可能的原因 #

• 依赖安装环境差异：Vercel生产构建时可能未完整安装intro.js的资源文件，比如误将intro.js放在devDependencies中，导致生产环境缺失CSS文件。
• 模块路径解析差异：Vite本地构建与Vercel上的Rollup构建对第三方包的路径解析逻辑不同，intro.js的包结构可能存在导出规范不明确的情况，导致Rollup无法找到CSS文件。
• 版本兼容性问题：intro.js/intro.js-react与当前Vite版本不兼容，引发路径解析错误。

可行解决方案 #

1. 确认依赖安装类型 #

确保intro.js和intro.js-react被安装为生产依赖，执行以下命令：

npm install intro.js intro.js-react --save

检查package.json，确保这两个包不在devDependencies字段中。

2. 修改CSS导入路径 #

尝试使用更明确的导入路径，比如：

// 导入压缩版CSS（推荐，减少体积）
import "intro.js/minified/introjs.min.css";
// 或者直接指向node_modules中的完整路径
import "../node_modules/intro.js/introjs.css";

3. 配置Vite预构建依赖 #

在vite.config.ts中添加optimizeDeps配置，强制Vite预构建intro.js相关依赖：

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

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['intro.js', 'intro.js-react']
  }
});

4. 清理Vercel构建缓存 #

进入Vercel项目的「Settings」-「Git」页面，找到「Build Cache」选项，点击「Clear Cache」，然后重新触发部署。

5. 检查Vite CSS配置 #

如果自定义了CSS处理规则，确保Vite的CSS插件没有限制第三方CSS的解析，比如：

export default defineConfig({
  css: {
    preprocessorOptions: {
      // 避免设置不必要的路径限制
    }
  }
});

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