Angular Material：已有项目中如何创建styles.scss修改主题？

架构老林

2026-8-9

解决方法

方法一：手动创建并配置styles.scss

直接在项目src目录下新建styles.scss文件
打开angular.json配置文件，找到projects -> [你的项目名称] -> architect -> build -> options -> styles数组，把里面的"src/styles.css"替换成"src/styles.scss"
同样，在architect -> test -> options -> styles里也做相同替换，保证测试环境也能正常使用scss主题

接下来就能在styles.scss里按照Angular Material的教程配置主题了，示例代码如下：

@import '@angular/material/theming';
// 自定义主题颜色
$my-primary: mat.define-palette(mat.$blue-palette, 700);
$my-accent: mat.define-palette(mat.$pink-palette, A200);
$my-warn: mat.define-palette(mat.$red-palette);
// 生成浅色主题
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  ),
  typography: mat.define-typography-config(),
));
// 给所有Material组件应用主题
@include mat.all-component-themes($my-theme);

方法二：保留原styles.css，导入独立主题文件

要是不想替换原有的css文件，也可以这么做：

在src目录下新建theme.scss文件，把Angular Material的主题配置代码写在这里
打开styles.css，添加一行导入语句：
```
@import './theme.scss';
```
注：正常安装Angular Material后，项目已经支持scss文件编译，要是遇到编译报错，可以检查angular.json里的stylePreprocessorOptions配置是否正确。