本文介绍如何在 Angular 项目中通过 SCSS _base.scss 全局基础样式表，高效复用通用样式（如标题间距、按钮布局），避免在多个组件样式文件中重复定义，提升可维护性与一致性。
本文介绍如何在 angular 项目中通过 scss `_base.scss` 全局基础样式表，高效复用通用样式（如标题间距、按钮布局），避免在多个组件样式文件中重复定义，提升可维护性与一致性。
在 Angular 项目中，当多个组件（如弹窗、表单页、卡片模块等）共用相似结构和视觉样式时——例如均包含 <h2> 标题、操作按钮组及固定间距规则——若为每个组件单独编写重复的 SCSS 规则（如 h2 { margin: 0 0 30px; color: blue; }），不仅增加维护成本，还易导致样式不一致。
推荐方案：建立全局基础样式表（Base Stylesheet）
创建一个名为 _base.scss 的 SCSS 文件（注意下划线前缀，表明其为可导入的 partial），集中定义跨组件通用的基础样式：
// src/styles/_base.scss
h2 {
margin-top: 0;
margin-bottom: 30px;
color: blue;
}
button {
display: flex;
flex-direction: column;
// 可扩展：添加通用 padding、font-size、border-radius 等
}✅ 关键点：该文件不直接编译为 CSS，仅作为样式片段被按需导入。
随后，在任意需要应用这些基础样式的组件 SCSS 文件中（如 header.component.scss、dialog.component.scss），通过 @import 引入：
// src/app/header/header.component.scss
@import '../../styles/base';
/* 组件专属样式可继续追加 */
.headertag {
font-weight: bold;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 确保 angular.json 中已将 src/styles/ 目录加入 stylePreprocessorOptions.includePaths，否则路径解析可能失败；
- 避免在 _base.scss 中使用深度选择器（如 :host 或 ::ng-deep），因其作用域不可控；基础样式应面向标准 HTML 元素或 BEM 类名；
- 若需更精细控制（如仅对特定语义按钮生效），建议配合 CSS 自定义属性（CSS Variables）或 SCSS @mixin + @include 按需注入，而非全局污染原生标签样式；
- 对于高度复用的 UI 结构（如本例中“标题+副标题+内容+双按钮”布局），进一步可封装为 @Input 驱动的通用组件（如 <app-modal-layout>），实现结构与样式的双重复用。
通过这一方式，你既消除了 6 个组件间冗余的样式代码，又保留了 SCSS 的模块化优势——样式变更只需修改一处，全量生效，真正践行 DRY（Don’t Repeat Yourself）原则。
