通过创建全局基础样式表（如 _base.scss）并使用 @import 在各组件 SCSS 文件中引入，可高效消除重复样式声明，实现样式统一维护与复用。
通过创建全局基础样式表（如 `_base.scss`）并使用 `@import` 在各组件 scss 文件中引入，可高效消除重复样式声明，实现样式统一维护与复用。
在 Angular 项目中，当多个组件共享相同的基础样式（例如统一的 <h2> 间距与颜色、按钮的 Flex 布局等），将样式硬编码到每个组件的 component.scss 中不仅违反 DRY（Don’t Repeat Yourself）原则，还会显著增加后期维护成本——一旦设计变更，需逐个文件修改，极易遗漏或不一致。
推荐采用 集中式基础样式管理方案：
-
新建全局基础样式文件（建议位于 src/styles/ 或 src/scss/ 目录下）：
// src/scss/_base.scss h2 { margin-top: 0; margin-bottom: 30px; color: blue; }
button { display: flex; flex-direction: column; // 可扩展通用交互状态 &:hover { opacity: 0.9; } }
> ✅ 注意：文件名以 `_` 开头（如 `_base.scss`），表示为 SCSS partial，不会被单独编译为 CSS 文件，仅用于导入。 2. **在目标组件样式中导入**： ```scss // my-component.component.scss @use 'src/scss/base' as *; // 推荐（Angular 14+，更安全的命名空间控制） // 或兼容旧版本写法： // @import 'src/scss/base';
- 进阶优化建议：
- ✅ 优先使用 @use 而非 @import：@use 提供模块化作用域，避免变量/混合宏冲突，是 SCSS 官方推荐的现代语法；
- ✅ 按语义组织基础样式：可拆分为 _typography.scss、_buttons.scss、_layout.scss，再由 _base.scss 统一聚合；
- ⚠️ 避免全局选择器污染：若组件内需样式隔离（如启用了 ViewEncapsulation.Emulated），直接写 h2/button 仍生效（因 Angular 的模拟封装不影响标签选择器）；但若未来启用 ViewEncapsulation.ShadowDom，则需改用 :host ::ng-deep h2（不推荐）或转为 CSS 自定义属性 + 主题类；
- ✅ 结合 CSS 自定义属性（CSS Variables）提升主题灵活性：
// _base.scss :root { --header-color: #007bff; --button-gap: 8px; } h2 { color: var(--header-color); } button { gap: var(--button-gap); }
最终，所有 6 个组件只需导入同一份基础样式，即可获得一致的视觉表现。当设计系统升级时，仅需修改 _base.scss，全站样式自动同步——真正实现“一次编写，处处生效”。
