Angular项目全局引入CSS样式：在angular.json中配置styles数组

在 Angular 项目里，想全局引入样式文件，最标准的做法就是在 angular.json 中配置 styles 数组。但很多开发者在这里遇到过问题：配了没效果、路径写错、或者根本不知道加在哪儿。今天就把这件事彻底理清楚，包括具体位置、路径规则、以及那些让人抓狂的“配了却没生效”的常见问题。

angular.json里的styles数组到底加在哪一级

加在项目配置的"build"节点下——不是根节点，也不是"test"或"serve"单独节点。Angular CLI 的构建、开发服务器、测试都依赖build配置，改这里才真正全局生效。

常见错误是把样式路径塞进"serve"里，结果ng build后样式全丢了——因为构建流程根本不读那个字段。

• 找到angular.json中对应项目的配置，通常是"projects": { "your-app-name": { ... } }
• 往"architect": { "build": { "options": { ... } } }的options里加"styles"数组
• 如果已有"styles"，直接追加路径；没有就新建，类型必须是字符串数组

styles数组里的路径是相对谁的

所有路径都是相对于angular.json所在目录（即工作区根目录）的相对路径，不是相对于src/，也不是相对于组件。

举个例子：样式文件放在src/assets/styles/global.scss，那就要写"src/assets/styles/global.scss"，不能写"assets/styles/global.scss"——少个src/会直接报找不到文件。

• 绝对路径不支持，别用/src/...或~/...
• 支持.css、.scss、.sass、.less（需额外配置loader，但CLI默认只认前三种）
• 顺序重要：数组靠前的样式优先级更高，会被靠后的同名规则覆盖

为什么加了styles但组件里还是没生效

最常见原因是启用了ViewEncapsulation.Emulated（Angular默认），它会把组件样式局部化，而styles数组引入的是全局样式——两者不冲突，但容易误判“没生效”。实际是全局样式已注入，只是被组件内联样式或更具体的CSS选择器盖住了。

• 用浏览器开发者工具检查里是否有对应或标签
• 确认选择器是否足够具体，比如button可能被app-header button覆盖，试试加!important临时验证（上线前删掉）
• 如果用了ViewEncapsulation.ShadowDom，全局样式默认不穿透，得手动用:host ::ng-deep（不推荐）或改用CSS自定义属性传递主题

要不要在styles里加node_modules里的CSS

可以，但路径要写全，比如"node_modules/bootstrap/dist/css/bootstrap.min.css"。不过要注意两点：

• 第三方库若带SCSS源码（如Bootstrap 5+），建议用@import方式在主SCSS文件里引入，便于变量重写和tree-shaking
• 直接引用编译后CSS会绕过Sass处理，无法修改$variables，且体积更大
• 某些库（如Angular Material）明确要求用angular.json引入其预编译主题CSS，这时必须走styles数组

路径拼错、大小写不符、扩展名漏写（比如写成.scss但文件是.css）都会静默失败，控制台通常只报Module not found，得逐个核对文件是否存在。