Angular多组件统一SCSS样式：如何消除重复样式？

针对你提到的6个结构相似、存在重复SCSS规则的Angular组件，以下是几个比mixins更合适的去重方案：

1. 创建共享样式文件统一导入 #

把重复的样式规则抽离到单独的SCSS文件中，然后在每个组件的样式表中导入该文件，既保证样式复用，又能在组件内添加特有样式。

示例：

• 新建shared-styles.scss文件，存放通用样式：

// shared-styles.scss
h2 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background-color: #3498db;
  color: white;
}

button:hover {
  background-color: #2980b9;
}

• 在每个组件的SCSS中导入：

// 组件样式文件
@import '../shared-styles.scss';

// 组件特有样式
.component-specific {
  padding: 1.5rem;
  background-color: #f8f9fa;
}

2. 全局样式配合组件选择器限定 #

如果不想每个组件都手动导入样式文件，可以在全局样式表（styles.scss）中，通过统一的组件类名来包裹通用样式，避免污染全局样式空间。

示例：

• 给所有目标组件的根元素添加统一类名（如common-feature-component）：

<!-- 组件HTML -->
<div class="common-feature-component">
  <h2>组件标题</h2>
  <button>操作按钮</button>
  <!-- 其他内容 -->
</div>

• 在全局styles.scss中编写限定样式：

.common-feature-component {
  h2 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  button {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    background-color: #3498db;
    color: white;
  }

  button:hover {
    background-color: #2980b9;
  }
}

3. 使用CSS自定义属性统一控制样式值 #

如果重复的是样式属性值（比如颜色、字号），可以通过全局CSS变量来统一管理，后续修改只需调整变量值，无需逐个修改组件样式。

示例：

• 在全局styles.scss中定义变量：

:root {
  --common-heading-color: #2c3e50;
  --common-heading-font-size: 1.5rem;
  --common-button-bg: #3498db;
  --common-button-hover-bg: #2980b9;
}

• 在组件样式中引用变量：

h2 {
  color: var(--common-heading-color);
  font-size: var(--common-heading-font-size);
  margin-bottom: 1rem;
}

button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background-color: var(--common-button-bg);
  color: white;
}

button:hover {
  background-color: var(--common-button-hover-bg);
}

4. 抽离共享组件复用结构与样式 #

既然组件的HTML结构也类似（包含<headertag>、按钮等），最彻底的方式是把这部分公共结构和样式抽成独立的Angular组件，其他组件直接引用该共享组件，实现结构、样式、逻辑的全复用。

示例：

• 新建common-header.component.ts：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'common-header',
  templateUrl: './common-header.component.html',
  styleUrls: ['./common-header.component.scss']
})
export class CommonHeaderComponent {
  @Input() title: string;
  @Input() buttonText: string = '操作';
  @Output() buttonClick = new EventEmitter<void>();

  onButtonClick() {
    this.buttonClick.emit();
  }
}

• 共享组件的HTML与样式：

<!-- common-header.component.html -->
<header>
  <h2>{{ title }}</h2>
  <button (click)="onButtonClick()">{{ buttonText }}</button>
</header>

// common-header.component.scss
h2 {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background-color: #3498db;
  color: white;
}

button:hover {
  background-color: #2980b9;
}

• 在其他组件中引用：

<!-- 业务组件HTML -->
<common-header 
  [title]="'用户管理'" 
  [buttonText]="'新增用户'"
  (buttonClick)="addUser()">
</common-header>
<!-- 组件特有内容 -->

内容的提问来源于stack exchange，提问作者Nidhi P