不能在Monorepo中让各子包直接import全局CSS，否则引发样式污染、重复加载、HMR失效及SSR不一致；应通过构建层统一注入（如Vite的additionalData）+ 样式隔离边界控制（变量共享、工具类收敛、业务样式下沉）来实现安全复用。
直接结论：不要在 Monorepo 里用 import 或 @import 全局 CSS 到每个子包，而应通过构建时注入 + 样式隔离边界控制来统一管理。 否则会立刻遇到样式污染、重复加载、HMR 失效、SSR 不一致等问题。
为什么不能让每个 package 自己 import '@/styles/reset.css'
Monorepo 中多个子包（比如 ui-core、app-admin、app-user）如果各自在入口或组件里 import 同一份基础 CSS（如重置、变量、工具类），会出现：
- 构建时被多次打包进不同 chunk，体积膨胀，且无法 dedupe
- Vite/Webpack 的 HMR 会因任意一个子包触发重载，导致整个页面样式闪动
- 服务端渲染（SSR）场景下，不同子应用可能在同个 Node 进程中运行，
document.head被反复 append，样式节点堆叠 - 样式优先级不可控 —— 比如
packages/styles更新后，packages/ui-core没重新构建，就可能用旧变量值
pnpm workspace 下推荐的 CSS 注入方式：构建层统一注入
核心思路是把基础 CSS 当作「构建产物依赖」而非「源码依赖」，由构建工具在最终应用层注入，而不是由各 package 主动引入。以 Vite 为例：
- 在根目录
packages/styles中只放源码（src/variables.css、src/reset.css），不导出.css文件，只导出编译后的dist/index.css - 在
apps/*类子包的vite.config.ts中，用css.preprocessorOptions或build.rollupOptions.plugins注入全局样式 - 例如：
export default defineConfig({<br> css: {<br> preprocessorOptions: {<br> css: {<br> additionalData: `@import "${resolve(__dirname, '../packages/styles/dist/index.css')}";`<br> }<br> }<br> }<br>}) - 若用 SCSS/Less，更推荐
additionalData方式 —— 它确保变量、mixin 在所有文件中可用，且只注入一次
如何避免子包误引 CSS 导致幽灵依赖？
即使规范了注入方式，开发时仍可能有人在 ui-core/src/Button.vue 里手写 @import '@/styles/utils.css'，这会绕过统一管控，埋下隐患：
- ESLint 无法拦截 CSS import，需靠自定义插件或
eslint-plugin-import配合no-restricted-imports - 在根目录
.eslintrc.cjs加："no-restricted-imports": [<br> "error",<br> {<br> "patterns": ["@/styles/*", "@/assets/css/*"]<br> }<br>] - 同时在
pnpm-workspace.yaml的packages配置中，把packages/styles设为 private，并移除其exports字段中的"./*.css"条目，防止被其他包import到 - CI 阶段加一道检查：
grep -r '\.css"' packages/ --include="*.ts" --include="*.tsx" --include="*.vue"，发现即 fail
跨框架共享 CSS 变量和工具类的实操边界
如果你的 Monorepo 同时有 Vue、React、甚至微前端子应用，CSS 变量（:root）可以共享，但 class 名必须收敛：
- 变量定义放在
packages/styles/src/vars.css，构建后生成dist/vars.css，供所有应用@import或link到 HTML head - 工具类（如
.text-sm、.flex）建议用tailwindcss+content扫描所有子包源码路径，统一生成dist/tailwind.css，而不是分散维护 - 禁止在
packages/styles里写带具体业务语义的 class（如.admin-header），这类样式应下沉到对应 app 包内，否则破坏封装性 - 微前端场景下，主应用注入
vars.css，子应用只用 CSS 变量，不额外加载 reset 或 layout 样式 —— 避免 CSS 隔离失效
真正难的不是怎么注入，而是谁有权改 packages/styles 里的基础规则、改了之后如何验证所有子应用没崩。建议把 packages/styles 的 PR 强制要求包含截图比对（Storybook）+ CI 视觉回归（Chromatic），否则“统一”二字只是幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
