如何优化Angular项目样式文件导入及Angular Material主题配置

我来帮你拆解官方文档的说明，一步步重构你的主题文件结构，解决重复样式的问题。核心思路就是把「主题变量的定义」和「混合指令的调用」彻底分开，让主题变量成为单一数据源，混合指令只执行一次，这样就不会在CSS输出中产生重复代码了。

一、现有结构的问题分析 #

你当前的blue-light.scss导入了custom-theme.scss并调用了@include custom-theme，如果后续你的组件SCSS文件也导入custom-theme.scss并调用这个混合，就会导致相同的样式代码被多次输出。官方说的「自定义主题文件不应导入到其他SCSS文件」，就是指不要把包含混合调用的文件到处导入，而是让混合只在一个地方执行。

二、重构步骤（分文件拆解） #

我们会把主题拆成4个核心文件（保留你原有的文件，只调整内容和依赖关系）：

1. 创建单独的主题变量文件 #

新建src/styles/themes/theme-variables.scss，这里只存放主题的变量定义，不调用任何混合指令：

@import '~@angular/material/theming';

// 定义Material调色板变量
$my-app-primary: mat-palette($mat-blue, 900);
$my-app-accent: mat-palette($mat-light-blue, 500, 900, A100);
$my-app-warn: mat-palette($mat-deep-orange);

// 生成主题对象（这是核心的主题数据源）
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

2. 修改blue-light.scss：只处理Material核心主题 #

调整blue-light.scss，只导入变量文件并调用Material的核心混合指令，不再处理自定义主题：

@import '~@angular/material/theming';
@import './theme-variables.scss';

// 初始化Material核心样式（全局只调用一次）
@include mat-core();

// 应用Angular Material的全局主题样式
@include angular-material-theme($my-app-theme);

3. 保留custom-theme.scss：只定义混合逻辑 #

你的custom-theme.scss只需要保留混合的定义，不需要导入任何主题文件——它会通过参数接收主题对象，这样就不会产生重复导入的问题：

@import '~@angular/material/theming';

// 自定义主题混合：接收外部传入的主题对象
@mixin custom-theme($theme) {
  // 从主题对象中提取需要的调色板
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  // 你的自定义主题样式
  .mat-nav-list .active {
    background: mat-color($primary, 50);
    color: mat-color($primary);
  }

  // 可以继续添加更多基于主题的自定义样式
}

4. 修改主样式文件styles.scss：统一调用所有混合 #

最后在主样式文件中，导入主题和自定义混合，只调用一次自定义主题混合：

// 导入Angular Material主题样式
@import "styles/themes/blue-light.scss";
// 导入自定义主题混合的定义
@import "styles/themes/custom-theme.scss";

// 调用自定义主题混合，传入已定义的主题对象（全局只执行一次）
@include custom-theme($my-app-theme);

// 你的全局基础样式（保持不变）
* {
  margin: 0;
  padding: 0;
}
// ...其他全局样式代码

三、组件中如何使用主题颜色 #

如果某个组件需要用到主题的颜色变量（比如$my-app-primary），只需要导入主题变量文件，而不是导入整个主题或自定义主题文件：

// 组件的xxx.component.scss
@import '../../styles/themes/theme-variables.scss';

.my-custom-component {
  background-color: mat-color($my-app-primary, 100);
  border-color: mat-color($my-app-accent);
}

这样既可以使用主题颜色，又不会重复输出任何样式代码。

四、关键优势总结 #

• 避免重复样式：所有混合指令（mat-core、angular-material-theme、custom-theme）都只在主样式文件中调用一次，CSS输出不会有重复代码
• 单一数据源：主题变量集中管理，修改调色板只需要改theme-variables.scss
• 灵活扩展：后续添加其他主题（比如深色主题），只需要复制theme-variables.scss修改调色板，然后在styles.scss中切换调用即可

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