1. 问题概述：为什么打包后组件样式丢失？

在使用Vite + TypeScript封装组件并发布到PNPM时，一个常见的技术问题是打包后组件样式丢失。这通常与样式的处理方式有关。Vite默认不会将CSS与组件一起打包，尤其当使用import引入样式时，若未正确配置vite.config.ts中的build.cssCodeSplit或rollupOptions，可能导致样式文件被分离或未被打包进最终产物。

关键点分析：

Vite 默认行为：CSS 文件会被提取为单独的文件。

Tree Shaking：未标注副作用的样式文件可能会被误删。

按需加载机制：如果组件库未实现按需加载，可能遗漏部分样式。

2. 技术分析：深入剖析问题原因

为了更清楚地理解问题，我们需要从以下几个方面进行分析：

样式导入方式：如果样式是通过import './style.css'导入的，且未正确配置 CSS 分割选项，样式文件可能不会被打包。

Tree Shaking 的影响：Vite 使用 Rollup 进行打包，默认会启用 Tree Shaking。如果未在package.json中设置"sideEffects"字段，可能会导致必要的样式文件被误删。

按需加载支持：组件库是否支持按需加载也会影响样式是否完整打包。

问题场景可能原因解决方向
CSS 样式未打包   未启用css.codeSplit   确保css.codeSplit设为true  
Tree Shaking 删除样式   未设置"sideEffects"字段   在package.json中添加"sideEffects"  
按需加载失效   未使用插件或未正确配置   引入unplugin-vue-components或unocss  
3. 解决方案：如何避免样式丢失

以下是几种有效的解决方案，可以根据实际需求选择适合的方法：

3.1 配置vite.config.ts

确保css.codeSplit设为true以支持 CSS 分割：

export default defineConfig({ build: { cssCodeSplit: true, }, }); 3.2 使用?inline显式内联关键样式

对于一些需要始终保留的关键样式，可以使用?inline将其内联到组件中：

import '&./styles.css?inline'; 3.3 借助插件实现样式自动注入

使用unplugin-vue-components和unocss等插件，可以实现组件和样式的按需加载：

// vite.config.ts import Components from 'unplugin-vue-components/vite'; import UnoCSS from 'unocss/vite'; export default defineConfig({ plugins: [ Components(), UnoCSS(), ], }); 3.4 设置sideEffects字段

在package.json中明确标明包含样式的文件路径，避免 Tree Shaking 误删必要样式：

{ "sideEffects": ["./src/styles/*.css"] } 4. 流程图：解决问题的整体思路

以下是一个解决问题的整体流程图：

graph TD; A[检查样式导入方式] --> B{是否正确配置css.codeSplit?}; B --否--> C[配置css.codeSplit为true]; B --是--> D{是否设置sideEffects?}; D --否--> E[设置sideEffects字段]; D --是--> F{是否需要按需加载?}; F --是--> G[引入插件如unplugin-vue-components]; F --否--> H[完成配置并重新打包];