Vite为何有时将CSS导入替换为/* empty css */？

算力阿峰

2026-6-16

问题分析与解决方案

可能的成因

Rollup摇树优化误判：你的配置开启了treeshake: true，Rollup在分析依赖时，可能因修改其他文件后缓存更新、重新分析依赖，误判ValidationWrapper.scss没有实际副作用，从而将其导入替换为/* empty css */。
vite-plugin-lib-inject-css插件冲突：这个插件用于将CSS注入组件库输出，但它的处理逻辑可能和Rollup的代码分割、摇树逻辑不兼容。当构建流程中插件执行时机或依赖分析出现偏差时，会导致CSS导入被错误移除。
多入口配置歧义：你同时配置了lib.entry和rollupOptions.input（通过glob生成多入口），这会让Rollup在追踪模块依赖时产生混乱，无法正确识别SCSS文件的引用关系。
构建缓存残留：Vite的缓存目录（node_modules/.vite）可能保留了旧的依赖分析结果，修改无关文件后触发部分缓存更新，导致异常的依赖判断。

在rollupOptions中明确标记CSS/SCSS文件有副作用，避免被摇树移除：

rollupOptions: {
  treeshake: {
    moduleSideEffects: (id) => id.endsWith('.scss') || id.endsWith('.css'),
  },
  // ...其他原有配置
}

这个配置告诉Rollup，所有CSS/SCSS文件都有副作用，不能被优化删除，确保组件的样式导入始终被保留。

尝试移除该插件，改用Vite原生CSS处理：你的配置已经开启cssCodeSplit: true，且assetFileNames正确指向assets目录，原生Vite应该能正确处理SCSS的编译和导入。
若必须使用插件，升级到最新版本，或调整插件在plugins数组中的顺序（放在react()之后），避免执行时机冲突。

同时存在lib.entry和rollupOptions.input会导致Rollup依赖分析混乱，建议二选一：

单入口组件库：删除rollupOptions.input的glob配置，只保留lib.entry指向src/index.ts。
多入口输出：移除lib.entry，完全通过rollupOptions.input定义所有入口，同时将preserveModules改为true，确保每个模块的依赖被独立追踪。

每次构建前手动清理缓存和输出目录，避免旧数据干扰：

rm -rf node_modules/.vite lib

之后重新执行构建命令。

确保ValidationWrapper组件在src/index.ts中被导出，或在其他被入口引用的模块中被使用。如果组件未被任何入口引用，Rollup会将其判定为未使用模块，连带SCSS导入一起被优化。

你设置该选项后未合并CSS，大概率是因为：

多入口配置导致Rollup仍按入口分割CSS，忽略全局的cssCodeSplit设置。
vite-plugin-lib-inject-css插件覆盖了Vite的CSS分割逻辑，导致配置不生效。
可以先移除插件，再测试cssCodeSplit: false是否生效。

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