Angular 13 Material：外部CSS覆盖文件不生效问题咨询

1. SCSS 编译顺序与导入逻辑差异 #

SCSS 的 @import 是编译时插入逻辑：导入的文件内容会被直接插入到 @import 语句所在的位置，而非最终编译产物的末尾。如果你的 styles.scss 中在导入自定义样式前已经引入了 Material 主题，或者 Material 样式是通过 angular.json 全局配置先于 styles.scss 编译，那么导入的自定义样式实际会被 Material 后编译的样式覆盖。

而直接将样式写在 styles.scss 末尾时，它属于主样式文件的最后一部分，编译后会排在所有主文件内的样式之后，自然能覆盖之前的 Material 样式。

举个典型的错误顺序示例：
angular.json 配置：

"styles": [
  "@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.scss"
]

styles.scss 内容：

/* 其他全局样式 */
@import 'src/custom-material-styles.css';

此时 Material 主题先于 styles.scss 编译，导入的自定义样式会被 Material 样式覆盖。

2. 纯 CSS 文件的运行时加载问题 #

如果你的自定义样式文件是 .css 后缀，SCSS 处理纯 CSS 文件的 @import 时会遵循原生 CSS 的规则：浏览器会在运行时才异步加载该文件，而非编译时合并到主样式中。这就可能导致自定义样式加载顺序晚于 Material 内嵌样式，或者被更高优先级的选择器压制。

解决办法：将自定义样式文件改为 .scss 后缀，用 @import 'src/custom-material-styles.scss'; 导入，确保编译时内容合并到主文件，顺序可控。

3. 选择器优先级问题 #

无论导入还是直接编写，若自定义选择器的优先级低于 Material 内置选择器，都无法生效。比如 Material 的按钮样式用了 .mat-button.mat-primary 这类复合选择器，而你仅用 .mat-button 去覆盖，优先级显然不够。

直接写在 styles.scss 生效可能是当时的选择器刚好匹配了足够的优先级，而导入文件时可能因嵌套、父选择器误用导致优先级降低。可以通过浏览器开发者工具查看元素的样式来源，确认自定义样式是否被加载、优先级是否不足。

4. 全局样式配置的顺序调整 #

最稳妥的方式是跳过 styles.scss 导入，直接在 angular.json 的 styles 数组中把自定义样式放在最后一项，强制 Angular 保证它的编译顺序在所有样式之后：

"styles": [
  "@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.scss",
  "src/custom-material-styles.scss"
]

快速排查步骤 #

• 将自定义样式文件后缀改为 .scss，重新导入测试
• 用浏览器开发者工具检查元素样式，确认自定义样式的加载状态与优先级
• 调整 angular.json 的 styles 数组顺序，把自定义样式放在最后
• 临时给自定义样式添加 !important 测试是否是优先级问题（不推荐长期使用）

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