各端样式注入策略

share 只提供样式内容（SCSS 源 + 令牌），注入方式由各 UI 库自选。两端策略不同，这是设计而非缺陷。任何一端都不得为此在本地持有组件 scss 副本（红线 2）。

两端对照

	lh-ui-plus（Vue3）	lh-ui-vue2
库入口注入	全量 side-effect：`src/index.ts` 逐组件 `import '@lh-ui/share/styles/<name>'`，引库即得全部样式	不注入，用户按需引 `@lh-ui/vue2/theme.css` + `@lh-ui/vue2/style/<name>`
样式产物	`es\|lib/<name>/style/index.css` + `es/<name>/style/index.scss`（scss 源随产物分发，`@use` 改写为 bare specifier）	`es\|lib/components/<name>/style/index.css`（仅 css）
主题产物	`theme/index.css` + `dist/index.css`（主题 + 全量）	`dist/theme/index.css`（明）+ `dist/theme/index-dark.css`（暗）
按需子路径	`./style/` → `es//style/index.scss`；`./style-css/` → `es//style/index.css`	`./style/` → `es/components//style/index.css`；`./theme.css`、`./theme-dark.css`
构建脚本	`lh-ui-plus/scripts/build-styles.mjs`（组件清单按 `packages/components` 扫描）	`lh-ui-vue2/scripts/build-styles.mjs`（按 `src/components` 扫描，share 无样式源的组件自动跳过）

为什么两端不一样

Vue3 端面向「引库即用」的多数派：vite 生态对 side-effect 样式注入友好，全量注入省掉用户配按需的成本；tree-shaking 在样式上本就无效，全量反而省心。
Vue2 端面向老项目与体积敏感场景：webpack 4 时代 side-effect 注入容易配错，按需引法（两条 import）更可控，也能让用户只引明色或只引暗色。

新增组件时的覆盖

新增组件时两端构建脚本都会自动覆盖（按各自组件目录扫描），但 share 的 styles/ 里必须有对应 <name>/index.scss——否则该组件在某一端无样式产物（静默跳过，不会报错）。这是「样式唯一源」红线带来的直接约束：先在 share 建样式，再在各端建组件。

跨端过渡类名：三个 mixin 收编

Vue2 的过渡类名是 -enter / -leave，Vue3 / React 是 -enter-from / -leave-from （-leave-to 两端同名）。手写双份类名必然漂移，所以一律 @include：

@use '@lh-ui/share/styles/theme/common/transition' as *;

.lh-dialog-fade {
  @include lh-enter-both;          // -enter + -enter-from（Vue3）
  @include lh-leave-both;          // -leave + -leave-from
  @include lh-transition-ends;     // -enter-to + -leave-to（两端同名）
}

需要把状态挂在后代节点上时传第二个参数：

@include lh-transition-ends('.lh-drawer-fade', '.lh-drawer__panel--right');

组件样式禁止再手写双份过渡类名。

主题定制产物的注入约束

buildPresetStyleText(vars) 产出可注入的 <style> 文本（:root + 暗色块）。 UI 层采纳时只能写 <style> 元素，不能写 documentElement 的内联 style：

内联 style 的特异性高于 var-dark.scss 的整段暗色变量，会导致暗色模式配色失真。

详见主题定制。